Question

grid

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

我基本上已经应用了一个基本的黑客攻击，并且沿着顶部对齐了几个小时，所以看起来他们看起来像是在细胞之间。你可以看到这并不完美。

我想要做的事实上是让数据单元之间的顶部时间很好地居中。我认为我可以使用固定大小的列宽来完成它，但是表需要拉伸到页面宽度的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

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

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

实例：http://jsfiddle.net/w6TnE/

如您所见，月份数字与边界完全一致。但请记住，此设置需要固定宽度，在本例中为60px：

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

我刚添加了一些额外的样式以明确它。

Answer 3

您可以在相对定位的元素中使用绝对定位的元素来获得所需的效果。我们的想法是使用<th>设置position: relative元素的样式，然后在带有position: absolute的元素中设置小时数字样式。然后，您可以根据需要将数字放在任何位置。

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

有关详细信息，您可能需要了解不同的positioning methods。

Answer 4

要使第一行真正居中于底部单元格与单个表格之间，您可以使用百分比的colspan + widths而不使用定位。这样它将是流动的，它可以使用任何字体，当你使用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/

Answer 5

table td{ text-align:center;}

这会将每个单元格的文本与中心对齐。

如何将表格的单元格排列在其下方的td单元格的中间（边界）

5 个答案: