Got some problems with building an html table - html

Question

I'm making a table and I got a few problems that I can't solve without help,namely:
I need all <td> to be the same height as it's respective <tr>. height:100% doesn't work for all <td> for some reason, however fixed height works.
<tbody> is smaller than <table> itself which leads to the gap on the right side.
I want all borders to be 1px, but some of them are more bold. How do I make them all uniform?
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

Delete display: inline-block; from the rule for td - this cancels their table-cell property, causing the problems you describe:
* {
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>