CODEWITHSUNDEEP
htmlcss
user4493177
user4493177

Reputation: 790

table set td width the same for all cells in row

I have a table where i want every cell in the header row have the same width. This is my current code:

table {width:100%}
table td{border: 1px solid}
.header td{ }
<html>

	<table>
		<tr class="header"><td colspan="2">header </td><td> header</td></tr>
		<tr><td> content </td><td> content </td><td> content </td></tr>
	</table>
</html>

Basically, i could get the result with this. 

	
table td{border: 1px solid}
.header td{ width: 100px}
<html>

	<table>
		<tr class="header"><td colspan="2">header </td><td> header</td></tr>
		<tr><td> content </td><td> content </td><td> content </td></tr>
	</table>
</html>

However, i want the following things:

Upvotes: 3

Views: 3131

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105843

You may jut look for table-layout:fixed; wich sprays evenly cols when no width are specified or applyes width specified without expanding :

table {width:100%; table-layout:fixed;}
table td{border: 1px solid}
.header td{ }
<html>

	<table>
		<tr class="header"><td colspan="2">header </td><td> header</td></tr>
		<tr><td> content </td><td> content </td><td> content </td></tr>
	</table>
</html>

Mind the the use of th and/or theader to filter tags/content

table td, th{
  border: 1px solid;
  table-layout:fixed;/* sprays evenly col width if no width set */
}
.header td{ 
  width:100px; /* table-layout if fixed will follow this value */
}
<html>

	<table>
		<tr class="header"><th colspan="2">header header header </th><th> header</th></tr>
		<tr><td> content </td><td> content </td><td> content  content  content </td></tr>
	</table>
</html>

Upvotes: 5

Albin
Albin

Reputation: 3012

As far as I understand your question it can be solved using js like this:

var heads = $('table thead tr th');
var len = heads.length;
$.each(heads, function(i, e){
  $(e).width(100.0/len + '%');
});

http://fiddle.jshell.net/311k5c6g/

I have not been able to find a pure css solution.

Upvotes: 1

Related Questions