Umbrella
Umbrella

Reputation: 1145

Got some problems with building an html table

I'm making a table and I got a few problems that I can't solve without help,namely:

  1. 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.
  2. <tbody> is smaller than <table> itself which leads to the gap on the right side.
  3. 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>

Upvotes: 0

Views: 58

Answers (1)

Johannes
Johannes

Reputation: 67798

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>

Upvotes: 2

Related Questions