Impossible HTML table to do

user_10862836 0
Viewed 133

I need to do the following table in HTML, too easy:

Result

The problem is in the second row, the second column only has one row, not two, in the code is rowspan = "2". Why doesn't work my code, is simple to do, I don't understand this problem, really…

Wrong result

The following is the relevant code:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

html-table css html
1 Answers

I just answered a very similar question here a few days ago. Apparently, if none of the columns contains the full amount of intended rows and the cell contents allow it, browsers "compress" the content into less rows (which IMO is a bug or at least, a misinterpretation, but well...).

As soon as you add more content into your cells (at least in those that do make a difference), the desired layout is rendered, with height according to the cell contents:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

But alternatively, you can add a fixed height to one or some of the cells to make the intended layout visible, even if they don't have as much content:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3" style="height: 80px;">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

user_56416690
Related