如何将表格的第 th 个单元格排列在其下方 td 单元格的中间（在边框上）

Question

我正在尝试创建this table layout。基本上，您在网格中看到的橙色 18 表示周二上午 11 点到下午 12 点之间的使用率为 18%。所以这就是为什么顶部的小时最好在表格单元格的边缘，而不是在单元格的中间。这样，它就会显示代表一小时时间范围内使用情况的数据。

我基本上已经应用了一个基本的 hack 并沿顶部右对齐了小时，所以它们看起来有点像它们在单元格之间。如您所见，这并不完美。

我想要做的实际上是让顶部的时间在数据单元之间很好地居中。我想我可以使用固定大小的列宽来做到这一点，但是表格需要拉伸到页面宽度的 100% 并且列宽百分比。然后它可以扩展到更小的浏览器。

有没有办法在 HTML 和 CSS 中做到这一点？

Answer 1

您始终可以将每个表格标题文本包装在 <div> 标记中，并使用 css position:relative 和 left:2px 或任何数量的像素使其看起来不错。

例子

<table>
  <tr>
    <th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
  </tr>
</table>

Answer 2

table td{ text-align:center;}

这将使每个单元格的文本居中对齐。

Answer 3

您可以使用position: relative; 将您的月份数字放置在您想要的位置，但这很棘手，因为表格单元格在 CSS 定位中的行为通常很奇怪。确切的定位可能取决于所使用的字体。

我想出了一个需要 2 个表的解决方案。我们的想法是为标题设置一张表，为内容设置一张表。诀窍是在标题中减少 1 个单元格。

现场示例：http://jsfiddle.net/w6TnE/

如您所见，月份数字与边框完美对齐。但请记住，此设置需要固定宽度，在本例中为 60 像素：

td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}

我只是添加了一些额外的样式以使其清晰。

Answer 4

您可以在相对定位的元素中使用绝对定位的元素来获得您想要的效果。想法是用position: relative 设置<th> 元素的样式，然后用position: absolute 在元素中设置小时数本身的样式。然后，您可以将数字放置在与单元格相关的任何位置。

Here 是一个示例 jsfiddle。要调整数字的位置，您可能需要在th > span 块中为right 属性使用像素值而不是百分比。

有关更多信息，您可能想了解不同的positioning methods。

Answer 5

要使第一行在单个表格的底部单元格之间真正居中，您可以在不使用定位的情况下使用 colspan + 百分比宽度。这样它就会流畅，适用于任何字体，并且在使用 2 位数字时不会出错。

HTML：

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>&nbsp;</td>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <td>&nbsp;</td>
        </tr>

        <tr>
            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>
        </tr>
    </tbody>
</table>

CSS：

table {
    text-align: center;
    width: 70%;    
    }

table td {
    width:8.33%; // 100% divided by (double the number of bottom cells)
}

table th {
    width:16.66%; // 200% divided by (double the number of bottom cells)
}

table td[colspan="2"] {
    background:yellow;
}

table td,
table th {
    outline:1px solid tan;
}

演示：http://jsfiddle.net/G7KZe/