22

我在我的 Web 应用程序中使用引导程序。我正在尝试让表格设计布局工作，同时仍然能够使用引导程序的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 上的文本不跨越其他列的问题，只是包裹在它当前所在的列中。https://jsfiddle.net/AkT6R/

我之前尝试过@Bryce 在提交的答案中提到的一些东西，但这似乎与 Bootstrap 不兼容。https://jsfiddle.net/AkT6R/1/

4

2 回答 2

37

Like so. You need 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, 3 April, 12 July, 14 August</div>
        </td>
    </tr>
  </tbody>
</table>

See it in action at https://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:

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

于 2013-09-11T18:40:16.407 回答
3

使用 colspan 标签属性。

<td colspan="2">

或者

    <td colspan="4">

参考

于 2013-09-11T18:37:51.800 回答