HTML 表格问题答案

【问题标题】：HTML Table issuesHTML 表格问题
【发布时间】：2019-02-07 05:18:29
【问题描述】：

我有一个主表，然后每个 td 插入子表。像下面这个问题可以说我有：

<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>

现在，如果 sub1 中只有 4 行，但 sub 2 和 3 各有 100 行，则该表继续将 sub1 表放在表其余部分的中间。我将如何阻止它这样做？

【问题讨论】：

<th id = "header1">blah</td> 应该是 <th id = "header1">blah</th>。 <tr><td> 应该是 <tr><td colspan="3">。
嵌套表非常糟糕。缺乏可读性不言自明。使用 Divs。
这应该会有所帮助：stackoverflow.com/questions/3673483/top-align-in-html-table
@P.Brian.Mackey：嵌套表格适用于嵌套表格数据。
如果我遇到这种情况，那么我会在 javascript/c# 中编写一个简单的 HTML 生成器。这样您就不必用眼睛解析嵌套表。

标签： html html-table

【解决方案1】：

试试这个：

<td valign="top">

您必须指定在哪里对齐 td

的内容

【讨论】：

请改用 CSS：td { vertical-align: top; }

【解决方案2】：

关注valign

<td valign='top'>

更新来源

<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td valign='top'>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>

【讨论】：

【解决方案3】：

如果您增加/减少编号。表中的行/列，您可能需要通过 rowspan 和 colspan 属性进行调整。在任何单元格顶部显示文本也需要valign="top" 属性

【讨论】：

【解决方案4】：

使第二个表格行（在标题行之后）开始标记<tr style="vertical-align:top">。这将起作用，并且不需要 rowspan 或 colspan。

【讨论】：