0

网格

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

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

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

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

4

5 回答 5

1

您总是可以将每个表格标题文本包装成一个<div>标签，并使用 cssposition:relative或left:2px任何数量的像素使其看起来不错。

例子

<table>
  <tr>
    <th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
  </tr>
</table>
于 2013-01-31T22:23:01.177 回答
1

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

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

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

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

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

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

于 2013-01-31T22:32:30.920 回答
1

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

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

有关更多信息，您可能想了解不同的定位方法。

于 2013-01-31T22:38:27.423 回答
1

要使第一行真正居中在带有单个表格的底部单元格之间，您可以使用 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/

于 2013-01-31T23:00:39.423 回答
0 
table td{ text-align:center;}

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

于 2013-01-31T22:25:07.987 回答