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

我在布局HTML页面上的表格时遇到问题。我有一个div容器，下面有几个表格。所有表格始终具有100％的宽度。在所有表中，tds具有相同的列宽度，例如HTML布局具有相同列和td百分比宽度的不同表格

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或边缘出现问题，如果我调整越来越差。

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

我创建从一个代码段（这是很旧，从另一个人，所以请原谅，如果是不好的。）：

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

我认识到，内容太广了电池但我能做些什么以使它看起来/在Firefox中的行为与IE一样？

来源

2016-11-15 M.H.

请显示编码使用https://jsfiddle.net/ – amyogiji

请发布您已经在其中工作的代码（最好在[JSFiddle]（https://jsfiddle.net/）），以便您可以更快地获得帮助。 –

目前我不能发布我的代码，因为它太长，包含我不被允许显示的数据，我会尽量减少我的代码。 –

我会想象，跨浏览器的不同尺寸可能会部分归因于每个浏览器对不同的HTML元素应用的默认保证金和填充量。

来源

2016-11-15 13:59:27

嗨，你可以用它来修复它

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 { 

}

希望这有助于

来源

2016-11-15 14:03:54 Yoshirou

你有没有尝试设置

table-layout:fixed;

在您的表的CSS？

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

编辑：

好吧，我对你的小提琴方式首先想到“crikey，我还没有看到字体标签很长一段时间”。 :)

我的第二个是，虽然你可以指定列的宽度，但html表格尽可能地容纳内容。

我已经使用css而不是所有这些属性从您的示例中生成了更新的小提琴，因此它更干净，更易于阅读。尽管如此，修复IE中布局的主要原因是表格布局：我之前提出的修复方案。如果你把它拿出来，你会发现IE和Edge中的表格没有对齐。

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

我测试过在Chrome，火狐，IE11和边缘该样品。

来源

2016-11-15 14:25:14 Nick

我已经尝试过这个，但后来发现了其他问题。我会再试一次，让你知道新问题是什么。 –

我试过了，对于我上面发布的代码，这将是一个解决方案。但是我有另一个代码来解决其他问题。我也尝试发布此代码。 –

我有一个代码，有其他问题：[链接]（https://jsfiddle.net/jqwth02m/#&togetherjs=OcnJEUj79x）。在第二列中，有两列的宽度为11％，但现在这些列的宽度不同。他们应该是平等的。这怎么可能？ –

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

回答

相关问题