Div错位在桌子内部

Question

我在td Chrome检查器中排列类似大小的div时遇到一些问题，确认像素大小相同。尝试做一个调度程序演示。任何想法如何解决对齐问题都会很棒！谢谢！

我承认这张小照片看起来并不多，但它已经存在，并且在24小时内它看起来很肯定。

我在最后一小时和督察一起玩了，但是找不到它！

我的Html代码段...

<table>
          <tbody>
          <tr>
            <td class="text-right ">
            <div class="time_label">6am</div>
            <div class="time_label">7am</div>
            <div class="time_label">8am</div>
            <div class="time_label">9am</div>
            <div class="time_label">10am</div>
            <div class="time_label">11am</div>
            <div class="time_label">12pm</div>
            <div class="time_label">1pm</div>
            <div class="time_label">2pm</div>
            <div class="time_label">3pm</div>
            <div class="time_label">4pm</div>
            <div class="time_label">5pm</div>
            <div class="time_label">6pm</div>
            <div class="time_label">7pm</div>
            <div class="time_label">8pm</div>
            <div class="time_label">9pm</div>
            </td>

            <td class="area area1">
            <div class="block block1"></div>
            <div class="block block2"></div>

我的Sass片段，这是一个bootstrap row / col-md-12 ...

$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;

.booker_wrapper {
  box-shadow: 0 0 12px #888;
}

.booker {

  table {
    margin: $booker-table-margin;
    height: $booker-height;
    table-layout: fixed;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }

  .time_label {
    height: $booker-height/16;
    border-top: 1px solid #DDD;
    border-left: 1px solid #DDD;
  }

  .block {
    height: $booker-height/32;
    border-left: 1px solid #DDD;
  }
  .area:last-child{
    border-right: 1px solid #DDD;
  }

  .area>.block:first-child
  {
    border-top: 1px solid #DDD;
  }

  .area>.block:nth-child(even)
  {
    border-bottom: 1px solid #DDD;
  }

  .area>.block:nth-child(odd)
  {
    border-bottom: 1px solid #DDD;
  }
}

Answer 1

你应该使用惊人的css属性box-sizing：border-box; IE8支持！然后将左列的高度项目设置为右侧的两倍，并将边框底部设置为每个项目，如：

HTML：

<table>
  <tr>
    <th>
      <div>Hello</div>
      <div>Heros</div>
    </th>
    <td>
      <div>World</div>
      <div>Toto</div>
      <div>Batman</div>
      <div>Superman</div>
    </td>
  </tr>
</table>

SCSS：

* {
  @include box-sizing(border-box);
}
$dark: #202020;
table {
  border: 1px solid $dark;
  border-bottom: 0;
}
th {
  div {
    height: 60px;
    border-bottom: 1px solid $dark;
    border-right: 1px solid $dark;
  }
}
td {
  div {
    height: 30px;
    border-bottom: 1px solid $dark;
  }
}

我在这里制作了一个代码：http://codepen.io/pik_at/pen/qEKKBy