我正在尝试创建一个显示预订的 HTML 表，例如：

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

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

我可以轻松完成大部分工作，但我无法弄清楚如何让标题行上的时间出现在列之间的行上方居中，如上所示，而不是出现在列中的单元格内，例如：

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

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

我觉得这很简单，但到目前为止，谷歌和反复试验都让我失望。

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

在这里编辑是我要感谢@Johannes 的回答，但避免使用 CSS 样式表，因此我不必处理在 K2/Joomla 中实现它：

回答

您可以通过以下方式进行操作：将时间指示包裹在span标签中。制作这些跨度inline-block，将它们在它们内部左对齐，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表格的全部内容。

THE END

分享

二维码

提示在boost和标准库中的表现不同吗？

< <上一篇

这个clojure数字函数是如何工作的？

下一篇>>