Ariona Rian
Reputation: 9437
Can not set the column width on multi row table header
I Have problem setting width of colum on multiple row table header. Below is the table markup for the 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="[email protected]">[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</td>
<td>Sep 20, 2015</td>
<td>(175) 825-8486</td>
</tr>
</tbody>
</table>You can check it here http://codepen.io/ariona/pen/LNQxNK?editors=1000.
As you noticed that we can set the column width on the first row th (Birthday Column) but not with the second row of th (Postal Column).
Some answers I have found is using col tag and using width attribute, but as we all now this tag is not supported in HTML5 and recommending to be styled only using CSS.
Upvotes: 1
Views: 2877
Answers (1)
Justinas
Reputation: 43479
When you set table-layout: fixed than all rows takes same width as first row so set all css for first row only.
So the only way to set the column width within this case is by creating the duplicate columns placed on the first row, set the desired width for each column and hiding it using CSS.
Example with 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>Upvotes: 7
Related Questions
- The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
- Set the table column width constant regardless of the amount of text in its cells?
- How can I set the default value for an HTML <select> element?
- Setting table column width
- Can the :not() pseudo-class have multiple arguments?
- How to link and route two ngFor loops with each other in Angular?
- How to evenly distribute content across an html cell for a newsletter?
- How to set Input field to READONLY using Javascript based on the current month
- positioning entries on a timeline