表格内部的 Div 未对齐答案

【问题标题】：Div Misalignment Inside of table表格内部的 Div 未对齐
【发布时间】：2015-02-28 19:18:18
【问题描述】：

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

我承认这张小照片看起来并不多，但它就在那里，而且超过 24 小时，它肯定看起来不太好。

我和inspector 玩了一个小时，但就是找不到！

我的 Html 代码 sn-p...

<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 sn-p，这是在引导行/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;
  }
}

【问题讨论】：

标签： html css sass

【解决方案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;
  }
}

我在这里做了一个codepen：http://codepen.io/pik_at/pen/qEKKBy

【讨论】：