HTML CSS 划分表格单元格

Question

我正在尝试以 24 段/小时为单位划分单元格。这是我的方法:

My approach我已将单元格分成 24 个部分，但结果不太合适:

<td class="tdFirst">
        <div class="personalHourFieldWrapper">
            <div class="personalHourField" style="left:4.12%;">&nbsp;</div>
            <div class="personalHourField" style="left:8.24%;">&nbsp;</div>
            <div class="personalHourField" style="left:12.36%;">&nbsp;</div>
            <div class="personalHourField" style="left:16.48%;">&nbsp;</div>

其实我不知道如何并排排列分隔线。非常感谢您的帮助!

Answer 1

你很接近。你只需要添加

td div {
    float: left
}

在你的风格中。这将使所有 div 元素水平对齐。

Demo

.tdFirst {
  background-color: #eee;
}
.tdFirst .personalHourFieldWrapper div {
  border-right: 1px dotted #666;
  width: 3.9%;
  float: left;
}

<table style="width:100%" border="1px solid #000">
  <tr>
    <th>Monday</th>
    <th>Thusday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td class="tdFirst">
      <div class="personalHourFieldWrapper">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
</table>