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

I'm using bootstrap with my web application. I'm trying to get a table design layout to work while still being able to use bootstrap's table-striped class. Currently I'm using the following:

我正在使用我的Web应用程序的bootstrap。我正在尝试使表格设计布局工作，同时仍然能够使用bootstrap的表条带类。目前我正在使用以下内容：

<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>

However, I'm wanting the 12 Sales Total; 4 March, 3 April, 12 July, 14 August of the table to appear below John Doe Sales Feb. 12th 2010 and not wrap within the column it's in now. If I use two separate <tr> elements to get the layout to work then the table-striped no longer works properly.

但是，我想要12个销售总额; 3月4日，4月3日，7月12日，8月14日的表格出现在2010年2月12日的John Doe Sales下面，并没有包含在它现在的列中。如果我使用两个单独的元素来使布局工作，那么表条带不再正常工作。

Edit:

编辑：

So here is the current setup. This gets what I want except for the issue where the text on the div doesn't span the other columns, and just wraps within the column it's currently in. http://jsfiddle.net/AkT6R/

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

I've tried something earlier that was mentioned in a submitted answer by @Bryce, but this isn't compatible with Bootstrap it seems. http://jsfiddle.net/AkT6R/1/

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

2 个解决方案

#1

Like so. You need rowspan plus colspan:

像这样。你需要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>

See it in action at http://jsfiddle.net/brycenesbitt/QJ4m5/2/

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

Then for your CSS problem. Right click and "Inspect element" in Chrome. Your background color comes from bootstrap.min.css. This applies a color to even and odd rows:

然后为你的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;
}

Fiddle it appropriately for your double sized rows:

适合你的双倍大小的行：

.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;
}

Done.

完成。

#2

Use the colspan tag attribute.

使用colspan标记属性。

<td colspan="2">

要么

<td colspan="4">

Reference

参考

#1