html - 如何创建多列表？

Question

这是我当前的代码:

<tbody>

    <tr><th colspan="7">TEST TITLE</th></tr>
    <tr><td colspan="1">10-19-2014 - Test</td></tr>
    <tr><td colspan="1">10-20-2014 - Test</td></tr>
    <tr><td colspan="1">10-21-2014 - Test</td></tr>
    <tr><td colspan="1">10-22-2014 - Test</td></tr>
    <tr><td colspan="1">10-23-2014 - Test</td></tr>
    <tr><td colspan="1">10-24-2014 - Test</td></tr>
    <tr><td colspan="1">10-25-2014 - Test</td></tr>
    <tr><td colspan="1">10-26-2014 - Test</td></tr>

</tbody>

表格的显示方式如下:

TITLE
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION

这是我希望它显示的方式:

TITLE
INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION

因为我已将标题的列跨度指定为 7，所以我认为其他每个 td 都会显示为从左到右，而不是在新行中显示每个。

我在这里做错了什么？

Answer 1

一种可能的解决方案，无需更改所有 html:

table tbody tr:not(:first-child) {
    float: left;
}
table tbody tr:first-child {
    text-align: left;
}
table tbody tr:not(:first-child):not(:last-child) td:after {
    content: "|";
    padding-left: 10px;
}

<table>
  <tbody>
    <tr>
      <th colspan="7">TEST TITLE</th>
    </tr>
    <tr>
      <td colspan="1">10-19-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-20-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-21-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-22-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-23-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-24-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-25-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-26-2014 - Test</td>
    </tr>
  </tbody>
</table>

我结合使用伪元素和伪类来实现这一点。