html - w3-table 列不等宽大小-6ren

html - w3-table 列不等宽大小

转载作者：太空宇宙更新时间：2023-11-04 01:57:20

26

4

我将 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列标记，方便我解释。带有文本 20B 带文本 1000C 与文本 2D 与文本 10E 带文本 1000

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

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

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

最佳答案

做这个改变

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