嵌套表格行 HTML CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29767585/
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
Nested table rows HTML CSS
提问by trex
I have never much worked with Complex HTML Tables. I need a table with nested columns and rows in it. I tried to create it but it has got many tables as well as number of borders are appearing everywhere. Here is the jsFiddle, that I have tried. So, what I'm going to achieve is:
我从来没有接触过复杂的 HTML 表格。我需要一个包含嵌套列和行的表。我试图创建它，但它有很多表格以及到处都出现的边框数量。这是我尝试过的jsFiddle。所以，我要实现的是：
- Single
<table>tag for all that structure - Multiple borders should not appear.
- All the structure should be a single table, rows should not separate from its position while resizing the page.(Which happens in my case)
<table>所有结构的单个标签- 不应出现多个边框。
- 所有结构都应该是一个表，在调整页面大小时，行不应与其位置分开。（在我的情况下发生）
采纳答案by Eng Cy
This is your structure you wanted, do not set width to percentage value to avoid struture losing shape while page resizing
这是您想要的结构，不要将宽度设置为百分比值以避免在调整页面大小时结构丢失形状
<table border="1" width="800" height="100">
<tr>
<th colspan="7"></th>
<th></th>
</tr>
<tr>
<td colspan="7"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
<td colspan="3"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
回答by LinkinTED
Well, the exact result can't be done with just one table. You have cells that appear on half the height or width of another cell. That is what won't function.
好吧，仅凭一张桌子无法获得确切的结果。您的单元格出现在另一个单元格的一半高度或宽度上。那是不会起作用的。
So I made you this structure, that comes as close as it gets:
所以我给你做了这个结构，它尽可能接近：
<table>
<colgroup>
<col width="3%" span="2" />
<col width="10%" />
<col width="3%" />
<col width="18%" />
<col width="*" span="2" />
</colgroup>
<tr>
<td colspan="6">x</td>
<td>x</td>
</tr>
<tr>
<td colspan="6">x</td>
<td>x</td>
</tr>
<tr>
<td rowspan="3">x</td>
<td>x</td>
<td colspan="3">x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td rowspan="2">x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
回答by Aramil Rey
Why would he want a table like that? Throw a rock at him.
他为什么要这样的桌子？向他扔石头。
Anyways, dont use border: xx xxx xxxtry to always use border-bottom, border-right, so you minimize the amount of lines there.
无论如何，不要border: xx xxx xxx尝试总是使用border-bottom，border-right，这样你就可以最大限度地减少那里的行数。
Add background-color intermitent and on hover efects, maybe it will make it more acceptable.
添加背景颜色间歇性和悬停效果，也许会使其更容易接受。
Else, I don't know. pray.
别的，我不知道。祈祷。
回答by Joze
Then you have to make a global table with a row for each row that you have. And inside the cells of those rows make another table to style it as you want.
然后，您必须为您拥有的每一行创建一个包含一行的全局表。在这些行的单元格内制作另一个表格，根据需要对其进行样式设置。
You say multiple borders should not appear, then make a class to show only the borders of the tables inside each cell and not on the others, this way you will have only the desired borders.
您说不应出现多个边框，然后创建一个类以仅显示每个单元格内表格的边框，而不显示其他单元格的边框，这样您将只有所需的边框。
Remember that the global table must contain all the other tables. One table contains everything.
请记住，全局表必须包含所有其他表。一张桌子包含了一切。
In your current code you have multiple tables separated to make the row structure so forcibly it won't render well.
在您当前的代码中，您将多个表分开，以强制使行结构无法很好地呈现。
