CSS中的偏移表列

时间:2016-09-15 14:31:51

标签: html css css-tables

如何使用HTML和CSS实现以下效果?

Enter image description here

它基本上是表格中的时间轴,时间低于列。

我在想下面的内容会起作用(请点击代码片段)或以某种方式将第二行偏移到右边,这样我就可以将日期的文本居中。



#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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

更正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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
        <td>02:00</td>
        <td>&nbsp;</td>
        <td>03:00</td>
    </tr>
</table>