w3-table列不等宽大小答案

【问题标题】：w3-table the column unequal width sizew3-table列不等宽大小
【发布时间】：2019-03-11 20:41:18
【问题描述】：

我正在使用带有 w3-table 类的 w3css。我为每个“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 列。 A 带文字 20 B 带文字 1000 C 与文本 2 D 带文字 10 E 带文字 1000

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

我可以知道如何确保列宽能够在每列中保持固定的大小比例，同时能够保持响应式网页吗？

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

【问题讨论】：

你的想法是错误的。当表格的宽度为 100% 时，为什么要为每列提供固定的 35px 宽度？这是你的问题的原因。需要时使用百分比和最小/最大宽度属性。
如果您能通过更改的源代码向我展示一个正确的想法，我将不胜感激。谢谢。

标签： html css html-table w3.css

【解决方案1】：

做这个改变

.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>

【讨论】：

感谢您的回复。它解决了宽度问题。顺便问一下，是否也可以修复第一列的填充？
你能说得更具体点吗，没能得到你的问题。 @HenryLoke
顺便说一下@HenryLoke，如果答案解决了您的问题，您可以使用勾号将其标记为已接受。

【解决方案2】：

将此添加到您的 css 文件中

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

}

这是链接http://codepen.io/myco27/pen/oBKWYq

【讨论】：

【解决方案3】：

您可以尝试将 box 类的 css 从 35px 更改为 20%

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

【讨论】：

感谢您的回复。列数将更改为 3、4 或 5 列。如果是 5 行，我们不能固定 20%，如果是 4 行等等，我们不能固定为 25%。
如果您有动态列。只需尝试添加以下样式 .w3-table { table-layout: fixed; }