如何使用 HTML 和 CSS 实现以下外观？
它基本上是表格中的时间线，时间在列下方。
我在想像下面这样的东西会起作用(请点击代码片段)或者以某种方式将第二行向右偏移，这样我就可以将日期的文本居中。
#table1 {
width: 100%;
color: #555;
position: relative;
border-collapse: collapse;
table-layout: fixed;
height: 100%;
}
#table1 td,
#table1 th {
border: 1px solid #E4E4E4;
}<table id="table1">
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
</tr>
<tr>
<td colspan="1.5">1
</td>
<td colspan="1.5">2
</td>
</tr>
</table>最佳答案
正确的 cellpadding 和 cellspacing :)
#table0 {
border-bottom: 1px solid #000;
}
#table1 td:nth-child(odd) {
border-right: 1px solid #000;
}
#table2 {
text-align: center;
}
.blue {
color: blue;
}
.first{
border-right: 1px solid green
}<table id="table0">
<colgroup>
<col width="50"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
</colgroup>
<tr>
<td class="first">00:05</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table id="table1">
<colgroup>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
</colgroup>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table id="table2">
<colgroup>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
</colgroup>
<tr>
<td>01:00 <BR> <span class="blue">03/27</span></td>
<td> </td>
<td>02:00</td>
<td> </td>
<td>03:00</td>
</tr>
</table>关于html - CSS 中的偏移表列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39513774/