css - 无法在多行表格标题上设置列宽

Question

我在设置多行表格标题的列宽时遇到问题。下面是示例的表格标记。

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>

你可以在这里查看http://codepen.io/ariona/pen/LNQxNK?editors=1000 .

正如您所注意到的，我们可以在第一行 th(生日列)上设置列宽，但不能在第二行 th(邮政列)上设置。

我找到的一些答案是使用 col 标签和使用 width 属性，但众所周知，HTML5 不支持此标签，建议仅使用 CSS 设置样式。

Answer 1

当您设置 table-layout: fixed 时，所有行的宽度都与 first row 相同所以只为第一行设置所有 css。

因此在这种情况下设置列宽的唯一方法是在第一行创建重复的列，为每列设置所需的宽度并使用 CSS 将其隐藏。

带有第一个隐藏列的示例:

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>