Html 不同行的html表格单元格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5938099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html table cell width for different rows
提问by user544079
Possible Duplicate:
table cell width issue
可能重复：
表格单元格宽度问题
I have a table set up as
我有一张桌子设置为
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
How do i get the 2 rows to have different cell width?
如何让 2 行具有不同的单元格宽度？
采纳答案by Till
As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:
据我所知，这是不可能的，这是有道理的，因为您要做的事情与表格数据表示的想法背道而驰。但是，您可以将数据放在多个表中并删除它们之间的任何填充和边距以达到相同的结果，至少是明显的。类似的东西：
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>I don't know your requirements but i'm sure there's a more elegant solution.
我不知道您的要求，但我确定有更优雅的解决方案。
回答by TokPhobia
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
一种解决方案是将您的表格分成 20 列，每列宽度为 5%，然后在每个实际列上使用 colspan 以获得所需的宽度，如下所示：
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>回答by roryf
You can't have cells of arbitrarily different widths, this is generally a standard behaviour of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
您不能拥有任意不同宽度的单元格，这通常是来自任何空间的表格的标准行为，例如 Excel，否则它不再是表格而只是文本列表。
You can however have cells span multiple columns, such as:
但是，您可以让单元格跨越多列，例如：
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
As an aside, you should avoid using style attributes like borderand bgcolorand prefer CSS for those.
顺便说一句，您应该避免使用像border和这样的样式属性，bgcolor并且更喜欢 CSS。
回答by oezi
with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):
有 5 列和colspan，这是可能的（单击此处）（但对我来说没有多大意义）：
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>
