了一些問題，建立一個HTML表格

Question

我正在做一個表，我得到了我解決不了沒有幫助，即幾個問題：

1. 我需要所有<td>是相同的高度它分別是<tr>。由於某種原因，height:100%並不適用於所有的<td>，然而固定的高度仍然有效。
2. <tbody>小於<table>本身導致右側的空白。
3. 我希望所有的邊框都是1px，但其中一些更加大膽。我如何使他們都統一？

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

* { 
 
    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; 
 
}

<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>

Answer 1

從td規則刪除display: inline-block; - 這取消其表單元格屬性，造成的問題你描述：

* { 
 
    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; 
 
}

<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>