如何在列分隔符边界线上方创建带有标签的 HTML table

Question

我正在尝试创建一个 HTML table 来显示如下预订：

   9am      10am     11am
    |--------|--------|--------|
Mon |<booked>|<booked>|        |
    |--------|--------|--------|

我可以轻松完成大部分操作，但我无法弄清楚如何让 header 线上的时间显示在列之间的线上方居中，而不是出现在列，例如：

       9am      10am     11am
    |--------|--------|--------|
Mon |<booked>|<booked>|        |
    |--------|--------|--------|

我一直在尝试几种解决方法，包括为每个“真实”列设置 3 列，以便我可以将它们合并到 header 行，但这让我需要为数据填充中间单元格线条使它看起来像一个简单的单元格边界，所以它不是很好。

我觉得它必须是简单的东西，但 google 和 trial-and-error 到目前为止让我失望。

我正在尝试在 Joomla 网站上的 K2 文章中执行此操作，因此我更喜欢一种仅在 HTML 中执行此操作的方法，而不是像那样定义 CSS 样式表在 Joomla 中打开 K2 文章的另一个问题。

编辑这里是我感谢但避免使用 CSS 样式表所以我不必处理在 K2/Joomla:

中实现它

<table cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td style="width: 25%; text-align: center; vertical-align: middle;">&nbsp;</td>
<td style="width: 25%; vertical-align: middle;"><span style="display: inline-block; transform: translateX(-50%);">9am</span></td>
<td style="width: 25%; vertical-align: middle;"><span style="display: inline-block; transform: translateX(-50%);">10am</span></td>
<td style="width: 25%; vertical-align: middle;"><span style="display: inline-block; transform: translateX(-50%);">11am</span></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">Mon</td>
<td style="border: 1px solid #000000; text-align: center; vertical-align: middle;">&lt;booked&gt;</td>
<td style="border: 1px solid #000000; text-align: center; vertical-align: middle;">&lt;booked&gt;</td>
<td style="border: 1px solid #000000; text-align: center; vertical-align: middle;">&nbsp;</td>
</tr>
</tbody>
</table>

Answer 1

您可以按以下方式进行：将时间指示包装在 span 标记中。制作这些跨度 inline-blocks，将它们在 th 内左对齐，然后使用 transform: translateX(-50%);:

将它们向左移动它们自身长度的一半

table {
  border-collapse: collapse;
  margin-left: 20px;
}

td {
  border: 1px solid #ccc;
  padding: 5px 15px;
}

th {
  font-weight: normal;
  text-align: left;
}

th>span {
  display: inline-block;
  transform: translateX(-50%);
}

<table>
  <tr>
    <th><span>9:00</span></th>
    <th><span>10:00</span></th>
    <th><span>11:00</span></th>
    <th><span>12:00</span></th>
  </tr>
  <tr>
    <td>entry 1</td>
    <td>entry 2</td>
    <td>entry 3</td>
    <td>entry 4</td>
  </tr>
  <tr>
    <td>entry 5</td>
    <td>entry 6</td>
    <td>entry 7</td>
    <td>entry 8</td>
  </tr>
</table>

如何在列分隔符边界线上方创建带有标签的 HTML table

How do I create an HTML table with labels above the column separator boundary lines

html

html-table