w3-table列的宽度不等宽

我使用w3css的类w3-table。我设置宽度为35px和高度为35px的每个“td”的宽度。我发现宽度仍然根据文字改变。w3-table列的宽度不等宽

这里是我的代码：

<!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 乙与文本1000 下用文本2 d与文本10 e为文本1000

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

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

我很感激你能不能给我一些提示。

来源

2017-02-21 HenryLoke

你的想法是错误的。为什么当您的表格宽度为100％时，为每列提供固定的35像素宽度？这是你的问题的原因。需要时使用百分数和最小/最大宽度属性。 – plvice

我很感激你是否能够通过修改源代码向我展示正确的想法。谢谢。 – HenryLoke

做这个改变

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

来源

2017-02-21 10:04:19

谢谢你的回复。它修复了宽度问题。顺便说一句，是否有可能修复第一列填充左边呢？ – HenryLoke

你能更具体，不能得到你的问题。@HenryLoke –

顺便说一句@HenryLoke如果答案解决了你的问题，你可以用tick标记为接受。 –

在你的CSS文件

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

}

这里的链接添加此http://codepen.io/myco27/pen/oBKWYq

来源

2017-02-21 09:49:42

你可以尝试改变盒类的CSS从35px到20％

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

来源

2017-02-21 09:49:49

谢谢你的回复。列数将更改3,4或5列。如果5行，我们不能修复20％，如果4行等，我们不能修复25％。 – HenryLoke

如果您有动态列。只要尝试添加以下样式 .w3-table table-layout：fixed; } –

w3-table列的宽度不等宽

回答

相关问题