html - Why does my table border not go all the way round the table?

Question

I have a table with a 3px black solid border. For some reason, one cell does not display this border but only that of the internal TD. I guess I must have done something incorrectly, but cannot see where it is.

.enumeratorstable1921 {
  width: 25%;
  margin-left: 75px;
  margin-top: 25px;
  border-collapse: collapse;
  font-style: normal;
  border: 3px solid black;
}

.enumeratorstable1921 td {
  border: 1px solid black;
  height: 1.25em;
  text-align: center;
}

<table class="enumeratorstable1921">
  <tr>
    <td colspan="4">To be filled up by the Enumerator.</td>
    <td colspan="2" rowspan="2">Enumerator&rsquo;s Initials.</td>
  </tr>
  <tr>
    <td>Males.</td>
    <td>Females.</td>
    <td>Persons.</td>
    <td>Rooms.</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

question from:https://stackoverflow.com/questions/65881827/why-does-my-table-border-not-go-all-the-way-round-the-table

Answer 1

The issue seems to be caused by the unnecessary use of colspan="2" for the last cell in the top row.

There are no actual rows with 6 cells, but by using colspan=4 + colspan=2, you are making the table use 6 columns. I'm not totally sure how browsers work with rows have that fewer actual cells; it could be that they add additional placeholder cells without content.

The empty 6th cell that is (presumably) added by the browser could explain why the 5th cell of the last row is drawn using its own defined border style - because a 6th cell is added, for which the border-collapse is applied, although still in a kinda weird way.

By removing the unneeded colspan="2", the problem no longer occurs:

.enumeratorstable1921 {
  width: 25%;
  margin-left: 75px;
  margin-top: 25px;
  border-collapse: collapse;
  font-style: normal;
  border: 3px solid black;
}

.enumeratorstable1921 td {
  border: 1px solid black;
  height: 1.25em;
  text-align: center;
}

<table class="enumeratorstable1921">
  <tr>
    <td colspan="4">To be filled up by the Enumerator.</td>
    <td rowspan="2">Enumerator&rsquo;s Initials.</td>
  </tr>
  <tr>
    <td>Males.</td>
    <td>Females.</td>
    <td>Persons.</td>
    <td>Rooms.</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>