w3-table列不等宽大小

Question

我将 w3css 与 class w3-table 一起使用。我将每个 "td" 的宽度设置为宽度 35px 和高度 35px。我发现宽度还是会根据文字变化。

这是我的代码：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<style>
    .box{
        width: 35px;
        height: 35px;
        border: 1px solid black;
    }

    .yellow {
        background-color: yellow !important;
    }
</style>
<body>

<table class="w3-table">
   <tbody>
      <tr>
         <td class="box yellow">20</td>
         <td class="box yellow">1000</td>
         <td class="box yellow">2</td>
         <td class="box yellow">10</td>
         <td class="box yellow">1000</td>
      </tr>
      <tr>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
         <td class="box yellow">&nbsp;</td>
      </tr>
   </tbody>
</table>

</body>
</html>

我附上结果输出如下：

有A、B、C、D、E栏标记，方便我解释。带有文本 20 B 带文本 1000 C 与文本 2 D 与文本 10 E 带文本 1000

A 和 D 列有两个数字文本，即分别为 20 和 10。我预计 A 和 D 的宽度相同，但输出结果显示 A 的宽度略大于 D。我可以得出结论，与其他列相比，第一列总是略大。我还注意到列宽根据文本数量而变化。示例 B 列中的 1000 和 C 列中的 E 宽度更大的 2。

请问如何保证每列的列宽保持固定的大小比例，同时又能保持响应式网页？

如果你能给我一些提示，我将不胜感激。

Answer 1

将此添加到您的 css 文件中

table{
  table-layout: fixed;
  width: 300px;

}

这是 link http://codepen.io/myco27/pen/oBKWYq

Answer 2

您可以尝试将方框 class 的 css 从 35px 更改为 20%

.box{
   width: 20%;
   height: 35px;
   border: 1px solid black;
}

Answer 3

做这个改变

.yellow {
    background-color: yellow !important;
    max-width:35px;
}

这将使所有列的宽度相等，即使它具有很大的值。这是运行示例：

.box{
     width: 35px;
     height: 35px;
     border: 1px solid black;
 }
 .yellow {
     background-color: yellow !important;
     max-width:35px;
 }

    <!DOCTYPE html>
    <html>
    <head>
        <title>W3.CSS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
    </head>

    <body>
    <table class="w3-table">
       <tbody>
          <tr>
             <td class="box yellow">20</td>
             <td class="box yellow">1000</td>
             <td class="box yellow">289834595</td>
             <td class="box yellow">10</td>
             <td class="box yellow">1000</td>
          </tr>
          <tr>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
             <td class="box yellow">&nbsp;</td>
          </tr>
       </tbody>
    </table>
    </body>
    </html>

w3-table列不等宽大小

w3-table the column unequal width size

html

css

html-table

w3.css