For the code to be HTML valid, you need to have td in a tr, if you intend to not put anything inside you can try something like below
<table class="collapse">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
Now the second box is filled with content
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.collapse{
border-collapse: collapse;
}
tr{
background: orange;
border: solid;
position: relative;
}
tr:before{
content: "";
min-height: 2rem;
display: block;
}
td{
padding: .5rem;
}<table class="collapse">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>You can include <td> in all cells, even empty ones
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.collapse{
border-collapse: collapse;
}
tr{
background: orange;
border: solid;
}
tr:before{
content: "";
min-height: 2rem;
display: block;
}
td{
padding: .5rem;
}<table class="collapse">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>I tried to find a solution to my problem on the Internet and on this forum.
Question: why is the background-color not displayed for an empty row?
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.collapse{
border-collapse: collapse;
}
tr{
background: orange;
border: solid;
}
tr:before{
content: "";
min-height: 2rem;
display: block;
}
td{
padding: .5rem;
}<table class="collapse">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr></tr>
</table>the browser don’t like the “display:block” you added inside the table
you need to put atleast one
`
Hi Temani Afif! And which option will you like xD? It is desirable that it works min-height.
Hi Vijay Kumawat! Yes it’s works fine, and most likely I will do so.