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

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

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).

Screenshot example of the table

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.

3 Answers


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/


HighResolutionMusic.com - Download Hi-Res Songs

1 BLACKPINK

Kiss And Make Up flac

BLACKPINK. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
2 Martin Garrix

Waiting For Tomorrow flac

Martin Garrix. 2018. Writer: Pierce Fulton;Mike Shinoda;Martijn Garritsen;Brad Delson.
3 John Legend

Written In The Stars flac

John Legend. 2018. Writer: Kiana Brown;Santoy;Kevin White;Mike Woods;MZMC;The Heavy Group;Rice N' Peas.
4 Martin Garrix

Access flac

Martin Garrix. 2018. Writer: Martin Garrix.
5 Martin Garrix

Yottabyte flac

Martin Garrix. 2018. Writer: Martin Garrix.
6 Alan Walker

Diamond Heart flac

Alan Walker. 2018. Writer: Alan Walker;Sophia Somajo;Mood Melodies;James Njie;Thomas Troelsen;Kristoffer Haugan;Edvard Normann;Anders Froen;Gunnar Greve;Yann Bargain;Victor Verpillat;Fredrik Borch Olsen.
7 Cardi B

Taki Taki flac

Cardi B. 2018. Writer: Bava;Juan Vasquez;Vicente Saavedra;Jordan Thorpe;DJ Snake;Ozuna;Cardi B;Selena Gomez.
8 Bradley Cooper

Shallow flac

Bradley Cooper. 2018. Writer: Andrew Wyatt;Anthony Rossomando;Mark Ronson;Lady Gaga.
9 Post Malone

Sunflower flac

Post Malone. 2018. Writer: Louis Bell;Billy Walsh;Carter Lang;Swae Lee;Post Malone.
10 Dyro

Latency flac

Dyro. 2018. Writer: Martin Garrix;Dyro.
11 Lady Gaga

I'll Never Love Again flac

Lady Gaga. 2018. Writer: Benjamin Rice;Lady Gaga.
12 Rita Ora

Let You Love Me flac

Rita Ora. 2018. Writer: Rita Ora.
13 Zara Larsson

Ruin My Life flac

Zara Larsson. 2018. Writer: Delacey;Michael Pollack;Stefan Johnson;Jordan Johnson;Sermstyle;Jackson Foote.
14 Halsey

Without Me flac

Halsey. 2018. Writer: Halsey;Delacey;Louis Bell;Amy Allen;Justin Timberlake;Timbaland;Scott Storch.
15 ZAYN

Fingers flac

ZAYN. 2018. Writer: Zayn Malik;Alex Oriet;David Phelan.
16 Dewain Whitmore

Burn Out flac

Dewain Whitmore. 2018. Writer: Dewain Whitmore;Ilsey Juber;Emilio Behr;Martijn Garritsen.
17 Mako

Rise flac

Mako. 2018. Writer: Riot Music Team;Mako;Justin Tranter.
18 Bradley Cooper

Always Remember Us This Way flac

Bradley Cooper. 2018. Writer: Lady Gaga;Dave Cobb.
19 Blinders

Breach (Walk Alone) flac

Blinders. 2018. Writer: Dewain Whitmore;Ilsey Juber;Blinders;Martin Garrix.
20 Julia Michaels

There's No Way flac

Julia Michaels. 2018. Writer: Ian Kirkpatrick;Justin Tranter;Julia Michaels;Lauv.

Language

Popular Tags