How to set a certain height for all table-colspans in HTML?

Patrick Dreid 10/22/2018 at 17:11. 3 answers, 0 views

I want to set/define a certain height for all colspans in my tables automatically. The (empty) colspans just separate the table content visually in every second row (like the screenshot shows).

Their height has to be 20px. My very bad solution at this moment: to give each (!) colspan the same id which define the height from a CSS. But, I have to do this 1000 times via hand manually! I am sure there has to be an easier option to solve this problem.

Martina Sartor 01/27/2017.

This is how you can target every other row in your table. Keep in mind that :nth-child doesn't work on older versions of IE.

Also don't use ID but classes.

.mytable tr:nth-child(2n+2){
height: 20px !important;
}
<table cellpadding="0" cellspacing="0" border="1" width="400" class="mytable">
<tr>
<td align="center">
col1
</td>
<td align="center">
col2
</td>
<td align="center">
col3
</td>
</tr>
<tr>
<td align="center" colspan="3">
colspan
</td>
</tr>
<tr>
<td align="center">
col1
</td>
<td align="center">
col2
</td>
<td align="center">
col3
</td>
</tr>
<tr>
<td align="center" colspan="3">
colspan
</td>
</tr>
<tr>
<td align="center">
col1
</td>
<td align="center">
col2
</td>
<td align="center">
col3
</td>
</tr>
</table>

n_palum 01/27/2017.

As Mr Lister said you are best off using border-spacing rather than trying to put what should be rowspan instead of colspans. You can set your tables to have a top or bottom spacing that would spread them apart evenly, either do 10px for top and bottom or just 20px for one of them and it should give the same effect. That way you only have to set that in the css once and not '1000x manually'.

grinmax 01/27/2017.

Try FlexBox

<div class="table">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

.table {
display: flex;
flex-wrap: wrap;
width: 200px;
}

.table .col {
width: 33%;
height: 20px;
border: solid 1px #000;
box-sizing: border-box;
}

.table .col:nth-child(4n+4) {
width: 100%;
background: red;
}

Live demo - https://jsfiddle.net/5z6v28L7/