我正在使用引导与我的Web应用程序.我试图获得一个表设计布局工作,同时仍然能够使用引导的表条纹类.目前我使用以下：
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Started</th>
</thead>
<tbody>
<tr>
<td>6</td>
<td>
<div>John Doe</div>
<div>12 Sales Total; 4 March,3 April,12 July,14 August</div>
</td>
<td>Sales</td>
<td>Feb. 12th 2010</td>
</tr>
</tbody>
</table>
但是,我想要12个销售总额; 2010年3月4日,7月12日,8月14日,John Dee Sales于2010年2月12日下方出现,不包括在现在的列中.如果我使用两个单独的< tr>元素使布局工作,然后表条纹不再正常工作.
编辑：
所以这里是当前的设置.这得到了我想要的,除了div上的文本不跨越其他列的问题,并且仅在其当前列中的包装.http://jsfiddle.net/AkT6R/
我已经尝试过早在@Bryce提交的答案中提到过的内容,但这似乎与Bootstrap不兼容. http://jsfiddle.net/AkT6R/1/
解决方法
就这样你需要rowspan plus colspan：
<table border=1>
<thead>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Started</th>
</thead>
<tbody>
<tr>
<td rowspan=2>6</td>
<td>
<div>John Doe</div>
</td>
<td>Sales</td>
<td>Feb. 12th 2010</td>
</tr>
<tr>
<td colspan=3>
<div>12 Sales Total; 4 March,14 August</div>
</td>
</tr>
</tbody>
</table>
看到它在http://jsfiddle.net/brycenesbitt/QJ4m5/2/的行动
然后为您的CSS问题.右键单击Chrome中的“检查元素”.您的背景颜色来自bootstrap.min.css.这将颜色应用于偶数和奇数行：
.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th
{
background-color: #f9f9f9;
}
适当地为您的双倍大小的行轻轻地调整：
.table-striped>tbody>tr:nth-child(4n+1)>td,.table-striped>tbody>tr:nth-child(4n+2)>td
{ background-color: #ff10ff;
}
.table-striped>tbody>tr:nth-child(4n+3)>td,.table-striped>tbody>tr:nth-child(4n+4)>td
{ background-color: #00ffff;
}
完成.
