html - 表格内部的 Div 错位

Question

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

我承认这张小照片看起来不太像，但它就在那里，而且在 24 小时的时间里，它肯定看起来不对劲。

过去一个小时我一直在玩 inspector，但就是找不到!

我的 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 行/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>

CSS:

* {
  @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