Question

我在HTML页面上布置表格时遇到问题。我有一个div容器，其中有几个表一个在另一个下面。所有表格的宽度始终为100％。在所有表中，tds具有相同的列宽，例如

Table 1   
Col 1: width 15%|Col 2: width 20%|Col 3: width 35%|Col 4: width 30%

Table 2   
Col 1: width 15%|Col 2: width 20%|Col 3: width 35%|Col 4: width 30% 

...    
Table n

如果我使用Mozilla Firefox或谷歌浏览器，一切看起来都不错，但如果我使用IE或Edge，则会出现问题，如果我调整大小，问题会越来越严重。

我不明白问题是什么。由于百分比，我预计不同表之间的列总是相等的。

我从代码中创建了一个代码段（它已经很老了，来自另一个人，所以请原谅，如果它不好。）：

https://jsfiddle.net/uag2Ldur/#&togetherjs=3VaeO1f97c

我认识到内容对于单元格来说太宽了，但是我能做些什么呢？它在IE中的外观/行为与Firefox中一样？

Answer 1

我认为浏览器的不同大小可能部分是由于每个浏览器应用于不同HTML元素的默认边距和填充量。

Answer 2

您好，您可以使用它来修复它

HTML：

<table style="width:100%">
  <tr>
    <th colspan="2">input</th>
    <th colspan="2">input</th> 
    <th colspan="2">Input</th>
  </tr>
</table>

CSS：

th, td {

}

希望这有帮助

Answer 3

您是否尝试过设置

table-layout:fixed;

在你的桌子的CSS？

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

编辑：

好吧，我第一次想到你的小提琴方式＆＃34; crikey，我很久没见过字体标签＆＃34;。：）

我的第二个问题是，尽管您可以在列上指定宽度，但html表格却尽力满足内容的需要。

我使用css而不是所有这些属性从您的示例中生成了一个更新的小提示，因此它更清晰，更易于阅读。虽然修复IE中的布局的主要因素是表格布局：我之前建议的修复。如果你把它拿出来，你会看到IE和Edge中的表格未对齐。

https://jsfiddle.net/6um81q3b/1/

我已经在Chrome，Firefox，IE11和Edge中对此示例进行了测试。

HTML布局具有相同列和td百分比宽度的不同表

3 个答案: