css - Can not set the column width on multi row table header -

i have problem setting width of colum on multiple row table header. below table markup example.

table{  	border-collapse: collapse;  	table-layout: fixed;  	width: 100%;  }  th,td{  	border: 1px solid #e3e3e3;  	padding: 5px 10px;  	word-break: break-word;  }  thead{  	background: white;  }	

<table class="table--fixed-header">    	<thead>  		<tr>  			<th rowspan=2>name</th>  			<th colspan=3>address</th>  			<th rowspan=2>email</th>  			<th rowspan=2 style="width:50px">birthday</th>  			<th rowspan=2>phone</th>  		</tr>  		<tr>  			<th>street</th>  			<th>city</th>  			<th style="width:100px">postal</th>  		</tr>  	</thead>  	<tbody>  		<tr>  			<td>lucius cotton</td>  			<td>ap #796-9909 vulputate st.</td>  			<td>hope</td>  			<td>4169</td>  			<td><a href="ac@ullamcorper.org">ac@ullamcorper.org</a></td>  			<td>jan 1, 2016</td>  			<td>(983) 441-5305</td>  		</tr>  		<tr>  			<td>richard lloyd</td>  			<td>792-9848 ante rd.</td>  			<td>fermont</td>  			<td>7683</td>  			<td>eget.metus@dolordapibusgravida.com</td>  			<td>may 2, 2016</td>  			<td>(527) 632-2952</td>  		</tr>  		<tr>  			<td>travis mcbride</td>  			<td>ap #442-3298 phasellus rd.</td>  			<td>redwater</td>  			<td>6595</td>  			<td>tellus@enimnonnisi.org</td>  			<td>mar 12, 2016</td>  			<td>(702) 597-5887</td>  		</tr>  		<tr>  			<td>ulric summers</td>  			<td>6158 erat av.</td>  			<td>vandoies/vintl</td>  			<td>9726</td>  			<td>at@atlacusquisque.co.uk</td>  			<td>feb 3, 2017</td>  			<td>(582) 103-8389</td>  		</tr>  		<tr>  			<td>matthew olson</td>  			<td>891-5840 nec rd.</td>  			<td>yorkton</td>  			<td>8334</td>  			<td>vel@ornareinfaucibus.co.uk</td>  			<td>nov 30, 2016</td>  			<td>(970) 479-7476</td>  		</tr>  		<tr>  			<td>zephania bradford</td>  			<td>1121 tempor st.</td>  			<td>mödling</td>  			<td>1181</td>  			<td>duis.risus.odio@aliquamarcu.org</td>  			<td>jan 21, 2016</td>  			<td>(845) 626-7935</td>  		</tr>  		<tr>  			<td>cadman patton</td>  			<td>2108 odio road</td>  			<td>dorval</td>  			<td>4120</td>  			<td>cum@ipsum.co.uk</td>  			<td>oct 19, 2016</td>  			<td>(445) 289-8299</td>  		</tr>  		<tr>  			<td>jack gordon</td>  			<td>1983 non av.</td>  			<td>gorakhpur</td>  			<td>4762</td>  			<td>cursus@tristiquesenectuset.org</td>  			<td>oct 26, 2016</td>  			<td>(296) 424-0001</td>  		</tr>  		<tr>  			<td>kennan richmond</td>  			<td>2459 cubilia road</td>  			<td>serralunga d'alba</td>  			<td>9951</td>  			<td>et@duisami.ca</td>  			<td>feb 11, 2017</td>  			<td>(224) 276-1182</td>  		</tr>  		<tr>  			<td>kirk reid</td>  			<td>899 enim st.</td>  			<td>camrose</td>  			<td>8777</td>  			<td>condimentum.donec.at@nunc.edu</td>  			<td>jan 15, 2017</td>  			<td>(822) 111-1819</td>  		</tr>  		<tr>  			<td>dante bowen</td>  			<td>ap #284-4616 leo, road</td>  			<td>wilmington</td>  			<td>3176</td>  			<td>tincidunt.congue.turpis@parturientmontes.co.uk</td>  			<td>jun 28, 2016</td>  			<td>(864) 823-2217</td>  		</tr>  		<tr>  			<td>quinlan duffy</td>  			<td>ap #234-1624 risus. road</td>  			<td>solre-sur-sambre</td>  			<td>9971</td>  			<td>risus.donec@consequatpurus.edu</td>  			<td>jul 20, 2015</td>  			<td>(885) 177-0463</td>  		</tr>  		<tr>  			<td>mufutau holcomb</td>  			<td>p.o. box 203, 5788 ullamcorper, street</td>  			<td>sambalpur</td>  			<td>8588</td>  			<td>elit@nascetur.ca</td>  			<td>jul 8, 2015</td>  			<td>(406) 607-2030</td>  		</tr>  		<tr>  			<td>axel mclaughlin</td>  			<td>256-4631 justo. avenue</td>  			<td>kitimat</td>  			<td>1242</td>  			<td>ut.cursus.luctus@donec.edu</td>  			<td>apr 5, 2016</td>  			<td>(926) 186-6440</td>  		</tr>  		<tr>  			<td>brett delaney</td>  			<td>p.o. box 308, 8032 cubilia ave</td>  			<td>macduff</td>  			<td>7334</td>  			<td>sem.elit.pharetra@dictumcursus.ca</td>  			<td>dec 25, 2016</td>  			<td>(616) 351-2782</td>  		</tr>  		<tr>  			<td>lars henry</td>  			<td>ap #754-7428 pede. st.</td>  			<td>lillianes</td>  			<td>7363</td>  			<td>at.fringilla@duisrisusodio.ca</td>  			<td>sep 1, 2016</td>  			<td>(989) 517-9229</td>  		</tr>  		<tr>  			<td>barry bowers</td>  			<td>718-9981 vel, avenue</td>  			<td>genval</td>  			<td>1172</td>  			<td>cursus@libero.co.uk</td>  			<td>jun 18, 2015</td>  			<td>(209) 802-7837</td>  		</tr>  		<tr>  			<td>steel meyer</td>  			<td>ap #985-389 vestibulum st.</td>  			<td>torino</td>  			<td>1775</td>  			<td>eget@malesuada.com</td>  			<td>aug 18, 2015</td>  			<td>(856) 750-8993</td>  		</tr>  		<tr>  			<td>alexander merritt</td>  			<td>804-6221 amet rd.</td>  			<td>chastre</td>  			<td>3620</td>  			<td>sed.facilisis@aliquetodio.net</td>  			<td>nov 19, 2015</td>  			<td>(113) 265-7935</td>  		</tr>  		<tr>  			<td>william charles</td>  			<td>107-5791 euismod ave</td>  			<td>brahmapur</td>  			<td>4162</td>  			<td>amet@integer.co.uk</td>  			<td>nov 18, 2015</td>  			<td>(562) 407-1979</td>  		</tr>  		<tr>  			<td>bradley berger</td>  			<td>959-5945 cursus. rd.</td>  			<td>armstrong</td>  			<td>2694</td>  			<td>vulputate@malesuada.org</td>  			<td>mar 8, 2016</td>  			<td>(296) 152-6269</td>  		</tr>  		<tr>  			<td>channing barber</td>  			<td>373-1556 metus. road</td>  			<td>richmond hill</td>  			<td>7647</td>  			<td>odio@etiamlaoreetlibero.org</td>  			<td>mar 24, 2016</td>  			<td>(433) 116-0319</td>  		</tr>  		<tr>  			<td>raphael carrillo</td>  			<td>ap #160-5410 cursus. avenue</td>  			<td>rodez</td>  			<td>8160</td>  			<td>amet@mi.edu</td>  			<td>jun 7, 2016</td>  			<td>(371) 224-6699</td>  		</tr>  		<tr>  			<td>keith weeks</td>  			<td>2818 vulputate, ave</td>  			<td>salzburg</td>  			<td>4284</td>  			<td>donec.egestas.duis@inmi.net</td>  			<td>feb 25, 2017</td>  			<td>(699) 621-9830</td>  		</tr>  		<tr>  			<td>scott benson</td>  			<td>p.o. box 829, 2193 curabitur ave</td>  			<td>laakirchen</td>  			<td>7983</td>  			<td>erat.in.consectetuer@augueac.com</td>  			<td>apr 8, 2017</td>  			<td>(824) 423-6813</td>  		</tr>  		<tr>  			<td>eagan hill</td>  			<td>156-950 pellentesque. rd.</td>  			<td>srinagar</td>  			<td>4426</td>  			<td>donec@vestibulum.com</td>  			<td>nov 17, 2016</td>  			<td>(508) 119-1695</td>  		</tr>  		<tr>  			<td>gage vargas</td>  			<td>358-5230 eget, av.</td>  			<td>renfrew</td>  			<td>7029</td>  			<td>tempus.eu.ligula@pedenonummy.edu</td>  			<td>mar 4, 2017</td>  			<td>(789) 836-7753</td>  		</tr>  		<tr>  			<td>michael mccormick</td>  			<td>6198 duis avenue</td>  			<td>colchester</td>  			<td>6711</td>  			<td>et.ultrices.posuere@nullaeuneque.ca</td>  			<td>jan 30, 2016</td>  			<td>(270) 598-5467</td>  		</tr>  		<tr>  			<td>wing collins</td>  			<td>774-7206 nisi street</td>  			<td>sogliano cavour</td>  			<td>2535</td>  			<td>rhoncus@arcuvestibulum.com</td>  			<td>jun 4, 2015</td>  			<td>(948) 246-4532</td>  		</tr>  		<tr>  			<td>jackson zimmerman</td>  			<td>610-3559 nunc ave</td>  			<td>thirimont</td>  			<td>9404</td>  			<td>amet.faucibus.ut@auctorodioa.org</td>  			<td>aug 17, 2015</td>  			<td>(253) 925-5828</td>  		</tr>  		<tr>  			<td>cedric parker</td>  			<td>930-7809 mi. av.</td>  			<td>banff</td>  			<td>5251</td>  			<td>odio.etiam.ligula@etiamimperdietdictum.net</td>  			<td>oct 18, 2015</td>  			<td>(714) 995-9033</td>  		</tr>  		<tr>  			<td>gareth stephenson</td>  			<td>880-5872 cras ave</td>  			<td>curarrehue</td>  			<td>4131</td>  			<td>pharetra@conubianostra.ca</td>  			<td>dec 11, 2015</td>  			<td>(331) 747-7855</td>  		</tr>  		<tr>  			<td>ross cummings</td>  			<td>896-1792 neque st.</td>  			<td>machynlleth</td>  			<td>8713</td>  			<td>magna.et@amet.org</td>  			<td>sep 19, 2016</td>  			<td>(746) 646-9589</td>  		</tr>  		<tr>  			<td>kane ferguson</td>  			<td>620-1220 sollicitudin road</td>  			<td>aschersleben</td>  			<td>2777</td>  			<td>morbi.tristique@duis.com</td>  			<td>jul 18, 2015</td>  			<td>(751) 612-5438</td>  		</tr>  		<tr>  			<td>bradley delacruz</td>  			<td>p.o. box 492, 1696 pellentesque av.</td>  			<td>eschwege</td>  			<td>6349</td>  			<td>proin.vel@nuncmauris.org</td>  			<td>feb 6, 2017</td>  			<td>(384) 477-0488</td>  		</tr>  		<tr>  			<td>caesar burke</td>  			<td>578-141 porta rd.</td>  			<td>hattiesburg</td>  			<td>3642</td>  			<td>feugiat.nec.diam@integer.org</td>  			<td>nov 21, 2016</td>  			<td>(632) 577-7763</td>  		</tr>  		<tr>  			<td>brendan todd</td>  			<td>3316 ultricies av.</td>  			<td>pozantı</td>  			<td>3664</td>  			<td>mus.proin.vel@risus.com</td>  			<td>feb 3, 2017</td>  			<td>(222) 304-8952</td>  		</tr>  		<tr>  			<td>lawrence yang</td>  			<td>ap #832-683 dictum st.</td>  			<td>narcao</td>  			<td>5611</td>  			<td>quis.pede@semperrutrum.ca</td>  			<td>oct 12, 2015</td>  			<td>(370) 467-3844</td>  		</tr>  		<tr>  			<td>kermit hansen</td>  			<td>7070 nec, av.</td>  			<td>lens-saint-remy</td>  			<td>6497</td>  			<td>rutrum.fusce@aliquetsemut.com</td>  			<td>aug 18, 2016</td>  			<td>(481) 891-4522</td>  		</tr>  		<tr>  			<td>jeremy gamble</td>  			<td>ap #403-9516 tincidunt road</td>  			<td>saint-nazaire</td>  			<td>2851</td>  			<td>malesuada@sapiennuncpulvinar.co.uk</td>  			<td>may 30, 2016</td>  			<td>(401) 350-4904</td>  		</tr>  		<tr>  			<td>dylan cleveland</td>  			<td>2878 pede. st.</td>  			<td>tiruvottiyur</td>  			<td>6466</td>  			<td>semper.rutrum.fusce@non.ca</td>  			<td>may 29, 2015</td>  			<td>(292) 575-4070</td>  		</tr>  		<tr>  			<td>felix griffin</td>  			<td>p.o. box 921, 8323 nec street</td>  			<td>okotoks</td>  			<td>2520</td>  			<td>felis.orci.adipiscing@egestasrhoncus.org</td>  			<td>jan 6, 2017</td>  			<td>(302) 659-6598</td>  		</tr>  		<tr>  			<td>hamilton haney</td>  			<td>5467 eu rd.</td>  			<td>villarrica</td>  			<td>1310</td>  			<td>tortor.nibh@iaculis.org</td>  			<td>dec 27, 2016</td>  			<td>(887) 498-0733</td>  		</tr>  		<tr>  			<td>ashton george</td>  			<td>p.o. box 265, 8731 torquent st.</td>  			<td>jemeppe-sur-meuse</td>  			<td>4650</td>  			<td>fames@bibendum.org</td>  			<td>jul 5, 2015</td>  			<td>(244) 352-4369</td>  		</tr>  		<tr>  			<td>marsden horn</td>  			<td>p.o. box 835, 8419 sodales avenue</td>  			<td>roxboro</td>  			<td>7495</td>  			<td>ultrices@seddolorfusce.org</td>  			<td>aug 7, 2016</td>  			<td>(940) 383-4619</td>  		</tr>  		<tr>  			<td>dalton jennings</td>  			<td>p.o. box 156, 6260 est av.</td>  			<td>saint-eug�ne-de-guigues</td>  			<td>3417</td>  			<td>a.mi@famesac.org</td>  			<td>mar 7, 2017</td>  			<td>(951) 991-0140</td>  		</tr>  		<tr>  			<td>cody gould</td>  			<td>p.o. box 122, 4043 convallis, ave</td>  			<td>cagnes-sur-mer</td>  			<td>6556</td>  			<td>vitae@mollisnoncursus.net</td>  			<td>jul 28, 2015</td>  			<td>(778) 366-9745</td>  		</tr>  		<tr>  			<td>addison gay</td>  			<td>864-1170 laoreet ave</td>  			<td>jefferson city</td>  			<td>9966</td>  			<td>nisi.cum@vitaeerat.net</td>  			<td>apr 10, 2015</td>  			<td>(121) 766-8774</td>  		</tr>  		<tr>  			<td>amery mueller</td>  			<td>193-4492 lectus. st.</td>  			<td>pero</td>  			<td>2475</td>  			<td>eget@blanditmattiscras.edu</td>  			<td>feb 16, 2016</td>  			<td>(726) 977-7147</td>  		</tr>  		<tr>  			<td>donovan ray</td>  			<td>p.o. box 375, 7796 et st.</td>  			<td>akhisar</td>  			<td>5329</td>  			<td>gravida.molestie.arcu@etpede.ca</td>  			<td>aug 26, 2015</td>  			<td>(667) 665-0806</td>  		</tr>  		<tr>  			<td>reese mccarthy</td>  			<td>496-3502 ac st.</td>  			<td>berwick</td>  			<td>2868</td>  			<td>elit@litoratorquentper.org</td>  			<td>jul 16, 2015</td>  			<td>(770) 122-5278</td>  		</tr>  		<tr>  			<td>barry hancock</td>  			<td>p.o. box 729, 5582 fringilla street</td>  			<td>springfield</td>  			<td>1186</td>  			<td>velit@tellusphaselluselit.edu</td>  			<td>jan 5, 2016</td>  			<td>(252) 369-5181</td>  		</tr>  		<tr>  			<td>nissim preston</td>  			<td>2756 a, avenue</td>  			<td>hoeke</td>  			<td>9326</td>  			<td>nunc.sed.pede@vulputatedui.org</td>  			<td>oct 10, 2016</td>  			<td>(185) 382-2489</td>  		</tr>  		<tr>  			<td>malachi nguyen</td>  			<td>ap #468-2313 tellus. av.</td>  			<td>tirúa</td>  			<td>6180</td>  			<td>dignissim.maecenas.ornare@vitaerisusduis.net</td>  			<td>oct 18, 2016</td>  			<td>(190) 562-3415</td>  		</tr>  		<tr>  			<td>oren mcbride</td>  			<td>2353 semper st.</td>  			<td>canora</td>  			<td>5788</td>  			<td>ac.fermentum@litoratorquentper.com</td>  			<td>jan 5, 2017</td>  			<td>(720) 670-5341</td>  		</tr>  		<tr>  			<td>kieran ashley</td>  			<td>ap #383-4426 dapibus st.</td>  			<td>casper</td>  			<td>8904</td>  			<td>nam.consequat.dolor@adipiscingelit.net</td>  			<td>sep 20, 2015</td>  			<td>(175) 825-8486</td>  		</tr>  	</tbody>  </table>

you can check here http://codepen.io/ariona/pen/lnqxnk?editors=1000.

as noticed can set column width on first row th (birthday column) not second row of th (postal column).

some answers have found using col tag , using width attribute, tag not supported in html5 , recommending styled using css.

when set table-layout: fixed rows takes same width first row set css first row only.

so way set column width within case creating duplicate columns placed on first row, set desired width each column , hiding using css.

example first hidden column:

td {    height: 50px;    text-align: center;    vertical-align: bottom;    background: url('http://www.justinas.tk/resource/ruler&h=100') no-repeat left top;  }  .hidden {    opacity: 0;  }  .hidden td {    height: 0;  }  table {    width: 100%;    table-layout: fixed;  }  td span {    background-color: rgba(0, 0, 0, 0.5);    color: white;  }

<table>    <tr class="hidden">      <td style="width: 100px;"></td>      <td style="width: 200px;"></td>      <td></td>    </tr>      <tr>      <td><span>col 1</span>      </td>      <td colspan=2><span>col 2</span>      </td>    </tr>    <tr>      <td><span>col 1</span>      </td>      <td><span>col 2</span>      </td>      <td><span>col 3</span>      </td>    </tr>  </table>