Question

我正在使用w3css和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列，方便我解释。 A带文字20 B带有文字1000 C与文本2 D与文本10 E与文本1000

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

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

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

Answer 1

执行此更改

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在您的css文件中添加

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

}

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

Answer 3

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

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

w3-table列不等宽度

3 个答案: