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>

Answer 2

flexbox也适用于此处，您甚至不必对宽度进行任何计算。

＆＃13;

＆＃13;

.tdFirst {
  background-color: #eee;
}
.tdFirst .personalHourFieldWrapper {
  display: flex;
}
.tdFirst .personalHourFieldWrapper div {
  border-right: 1px dotted #666;
  flex: 1;
}

＆＃13;

<table style="width:100%" border="1px solid #000">
  <tr>
    <th>Monday</th>
    <th>Tuesday</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>

＆＃13;

＆＃13;

＆＃13;