html – 我的表格中有两行可以跨越多个列,而仍然与引导兼容？

概述我正在使用引导与我的Web应用程序.我试图获得一个表设计布局工作,同时仍然能够使用引导的表条纹类.目前我使用以下： <table> <thead> <th>ID</th> <th>Name</th> <th>Department</th> <th>Started</th> </thead> <tbody> <tr> <td>6</td 我正在使用引导与我的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;}

完成.

总结

以上是内存溢出为你收集整理的html – 我的表格中有两行可以跨越多个列,而仍然与引导兼容？全部内容，希望文章能够帮你解决html – 我的表格中有两行可以跨越多个列,而仍然与引导兼容？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。