构建一个html表遇到了一些问题

Question

我正在制作一张桌子而且我遇到了一些无法帮助解决的问题，即：

1. 我需要所有<td>与其<tr>的高度相同。由于某种原因height:100%并不适用于所有<td>，但固定高度可以正常工作。
2. <tbody>小于<table>本身，导致右侧的差距。
3. 我希望所有边框都是1px，但其中一些边框更大胆。如何使它们统一？

https://codepen.io/NoOneKnowsWhoIam/pen/rzweRV

＆＃13;
＆＃13;
* {
  box-sizing: border-box;
}

.caption {
  background: yellow;
  padding: 5px;
}

table {
  border-collapse: collapse;
  border: 1px solid black;
  width: 400px;
  display: block;
  margin: 0 auto;
  background: grey;
}

.quarter-width {
  width: 25%;
}

.half-width {
  width: 50%;
}

.third-width {
  width: 33.33333333333333%;
}

td {
  padding: 5px;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  display: inline-block;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}
＆＃13;
<table>
  <tbody>
    <caption class="caption"><b>ST CLARE ZNNR5</b></caption>
    <tr>
      <td><b>11:39  01.07.2017</b></td>
    </tr>
    <tr>
      <td class="half-width"><b>MMSI 235002514</b></td>
      <td class="half-width text-right"><b>IMO 09236949</b></td>
    </tr>
    <tr>
      <td>
        <b>
              Пассажирское судно, в пути<br>
              86 м × 18 м × 2.5 м
            </b>
      </td>
    </tr>
    <tr>
      <td class="half-width">
        Координаты<br>
        <b>50 47. 2000 N</b><br>
        <b>001 06. 4000  W</b>
      </td>
      <td class="half-width text-right">
        Время с момента получения отчета<br>
        <b>9 с</b>
      </td>
    </tr>
    <tr>
      <td class="half-width">
        Пункт назначения<br>
        <b>Port Fish</b>
      </td>
      <td class=" fixim half-width text-right">
        Расчетное время прибытия<br>
        <b>
              2017-07-01 17:15
              <b>(UTC)</b>
        </b>
      </td>
    </tr>
    <tr class="text-center">
      <td class="quarter-width">
        COG<br>
        <b>329°</b>
      </td>
      <td class="quarter-width">
        COG<br>
        <b>329°</b>
      </td>
      <td class="quarter-width">
        HDG<br>
        <b>323°</b>
      </td>
      <td class="quarter-width">
        LOG<br>
        <b>_</b>
      </td>
    </tr>
    <tr>
      <td><b>Спланированный маршрут</b></td>
    </tr>
    <tr>
      <td class="third-width"><b>ПТ №1</b></td>
      <td class="third-width">
        Tдв<br>
        <b>12:57:19</b>
      </td>
      <td class="third-width">
        D<br>
        <b>40.162 миль</b>
      </td>
    </tr>
    <tr>
      <td>Рассчитать маршрут</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

Answer 1

从display: inline-block;的规则中删除td - 这会取消其table-cell属性，从而导致您描述的问题：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.caption {
  background: yellow;
  padding: 5px;
}

table {
  border-collapse: collapse;
  border: 1px solid black;
  width: 400px;
  display: block;
  margin: 0 auto;
  background: grey;
}

.quarter-width {
  width: 25%;
}

.half-width {
  width: 50%;
}

.third-width {
  width: 33.33333333333333%;
}

td {
  padding: 5px;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

＆＃13;

<table>
  <tbody>
    <caption class="caption"><b>ST CLARE ZNNR5</b></caption>
    <tr>
      <td><b>11:39  01.07.2017</b></td>
    </tr>
    <tr>
      <td class="half-width"><b>MMSI 235002514</b></td>
      <td class="half-width text-right"><b>IMO 09236949</b></td>
    </tr>
    <tr>
      <td>
        <b>
              Пассажирское судно, в пути<br>
              86 м × 18 м × 2.5 м
            </b>
      </td>
    </tr>
    <tr>
      <td class="half-width">
        Координаты<br>
        <b>50 47. 2000 N</b><br>
        <b>001 06. 4000  W</b>
      </td>
      <td class="half-width text-right">
        Время с момента получения отчета<br>
        <b>9 с</b>
      </td>
    </tr>
    <tr>
      <td class="half-width">
        Пункт назначения<br>
        <b>Port Fish</b>
      </td>
      <td class=" fixim half-width text-right">
        Расчетное время прибытия<br>
        <b>
              2017-07-01 17:15
              <b>(UTC)</b>
        </b>
      </td>
    </tr>
    <tr class="text-center">
      <td class="quarter-width">
        COG<br>
        <b>329°</b>
      </td>
      <td class="quarter-width">
        COG<br>
        <b>329°</b>
      </td>
      <td class="quarter-width">
        HDG<br>
        <b>323°</b>
      </td>
      <td class="quarter-width">
        LOG<br>
        <b>_</b>
      </td>
    </tr>
    <tr>
      <td><b>Спланированный маршрут</b></td>
    </tr>
    <tr>
      <td class="third-width"><b>ПТ №1</b></td>
      <td class="third-width">
        Tдв<br>
        <b>12:57:19</b>
      </td>
      <td class="third-width">
        D<br>
        <b>40.162 миль</b>
      </td>
    </tr>
    <tr>
      <td>Рассчитать маршрут</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;