Html 表格中不同行的不同 td 宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8341492/
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
Different td widths in different rows in tables?
提问by iceteea
Quick-Question: how can this be achieved? (see image below)
快速问题：如何实现？（见下图）
Setting tdwidth booth in plain html and with css had no effect.
td在纯 html 和 css 中设置宽度展位没有效果。
The tdwidth CAN vary but only with the same width for each row.
的td宽度可以改变，但仅具有用于每行相同的宽度。
回答by Chris Fulstow
Use three separate <table>blocks, each with a single row having three columns of varying widths.
使用三个单独的<table>块，每个块都有一行，三列宽度不同。
回答by dash
I don't believe it can in one table easily.
我不相信它可以轻松地放在一张桌子上。
Instead, you have to use the colspan attribute to overlap cells on different rows.
相反，您必须使用 colspan 属性来重叠不同行上的单元格。
For example, use 6 columns, the first row will have colspan = 2 , td, colspan = 2
例如，使用 6 列，第一行会有 colspan = 2 , td, colspan = 2
The second row will have td, td colspan=2, td and so on.
第二行将有 td、td colspan=2、td 等。
It's quite messy - you might want to consider displaying your data in a different way, for example, using DIVs
它非常混乱 - 您可能需要考虑以不同的方式显示您的数据，例如，使用 DIV
回答by James Hill
It's a lot to look at, but you need a parent table with three rows where each row contains another table with three columns:
要查看的内容很多，但是您需要一个包含三行的父表，其中每行包含另一个具有三列的表：
<table>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a working jsFiddle to illustrate.
回答by Piotr Ma?lanka
It's actually possible without this sub-tabling. I'm having this as a bug in my layout now. Just try playing around with paddings and margins inside cells :(
没有这个子表实际上是可能的。我现在将此作为布局中的错误。只需尝试在单元格内使用填充和边距：(
"Bug" works consistently across multiple browsers.
“错误”在多个浏览器中始终如一地工作。
Edit: Hunted that one.
编辑：猎杀那个。
td { display: block; }
Don't do it at home.
不要在家里做。
回答by Sonal Khunt
take 1 main table with 3 tr and in each tr take another sub table with 3 column than apply css
取 1 个主表和 3 个 tr，在每个 tr 中取另一个具有 3 列的子表，而不是应用 css
