如何在我的表中有两行跨越多列,同时仍然与引导程序兼容？

Question

我正在使用我的Web应用程序的bootstrap.我正在尝试使表格设计布局工作,同时仍然能够使用bootstrap的table-striped类.目前我正在使用以下内容:

<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 Sales Total; 4 March, 3 April, 12 July, 14 August表格显示在下面,John Doe Sales Feb. 12th 2010而不是在它现在的列中包装.如果我使用两个单独的<tr>元素来使布局工作,那么它将table-striped不再正常工作.

编辑:

所以这是当前的设置.这得到了我想要的,除了div上的文本没有跨越其他列的问题,只是包装在它当前所在的列中.http://jsfiddle.net/AkT6R/

我已经尝试过早些时候在@Bryce提交的答案中提到的东西,但这似乎与Bootstrap不兼容.http://jsfiddle.net/AkT6R/1/

Answer 1

像这样.你需要rowspan加上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, 3 April, 12 July, 14 August</div>
        </td>
    </tr>
  </tbody>
</table>

在http://jsfiddle.net/brycenesbitt/QJ4m5/2/上查看它的实际操作

然后为你的CSS问题.右键单击Chrome中的"Inspect element".你的背景颜色来自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;
}

完成.