Question

我有以下HTML表格：

这是实际的标记：

<table>
    <thead>
        <tr>
            <th colspan="7">
                <h2>Title</h2>
            </th>
        </tr>
        <tr>
            <th></th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>Row</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

由于行标题元素（橙色圆圈），h2元素（红色框）在标题中间（绿线）不完全对齐。

将行标题元素的宽度设置为0并不完全有效，但这正是我原本想要做的事情。使用标题上的左/右边距将不起作用，因为实际的行标题具有不同的宽度。

编辑：使用<td><td colspan="6">并不能完全解决问题。堆叠多个这些表时，它们的标题不会水平排列。请注意，列数和列宽因表格而异。

Answer 1

您可以将那些th取消流程：

＆＃13;

body {
  padding: 0 100px;  /* Some margin to prevent th from being pushed too much */
}
table {
  margin: 0 auto;    /* Center horizontally */
  position: relative;/* Containing block for the th */
}
tr > th:first-child {
  position: absolute;/* Out of flow */
  right: 100%;       /* Push it to the left of the table */
  width: 100px;      /* Some width */
  text-align: right; /* Align inner content to the right */
}

＆＃13;

<table>
  <thead>
    <tr><th></th><th colspan="6"><h2>Title</h2></th></tr>
    <tr><th></th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><th>Row</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  </tbody>
</table>
<table>
  <thead>
    <tr><th></th><th colspan="6"><h2>Title</h2></th></tr>
    <tr><th></th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><th>Another Row</th><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  </tbody>
</table>

＆＃13;

Answer 2

您是否考虑使用类似Bootstrap网格系统的东西？ https://getbootstrap.com/examples/grid/

Answer 3

它没有对齐，因为7列宽th从左边开始并伸出7列，这是表的整个宽度。你需要它在6的中间。所以试试这个：

<table>
<thead>
    <tr>
        <th></th>
        <th colspan="6">
            <h2>Title</h2>
        </th>
    </tr>
    <tr>
        <th></th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
    </tr>
</thead>

<tbody>
    <tr>
        <th>Row</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</tbody>

这将在左侧放置一个空的th标记，然后是一个6列宽的th标记。这将使你的头衔居中。

编辑：以下是一些小提琴：

正如您所说：http://jsfiddle.net/ppj08xxh/

正如我上面建议的那样：http://jsfiddle.net/ppj08xxh/2

比较两者，我看不出你提到的转变。

将表元素设置为宽度0

3 个答案: