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

Posted 2023-03-05

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

【英文标题】：How can I have two rows in my table that span multiple columns, while still being compatible with bootstrap?

【发布时间】：2013-09-15 22:10:33

【问题描述】：

我在我的 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/

【问题讨论】：

您可以使用 colspan 属性使

元素跨多个列。同样，您可以使用 rowspan 属性来跨越多行。如果没有一些非常聪明的 CSS，您将无法使 中的 1 个 div 跨越多个列。最好的办法是更改具有名称的单元格并将销售总额移动到新行，并将 colspan 设置为 4。

请发fiddle

@AlexW，抱歉更新了他们的帖子。

【参考方案1】：

使用 colspan 标签属性。

<td colspan="2">

或

  <td colspan="4">

Reference

【讨论】：

这也是我的第一个想法。我不知道这是否是他正在寻找的东西。似乎他希望他的嵌套 div 跨越列，但除此之外仍然有列。

我也想知道这一点，但我想我会回答可能的问题并让他在必要时澄清他的要求

【参考方案2】：

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

在https://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;

完成。

【讨论】：

我尝试过类似的方法，但使用这种方法似乎不适用于 Bootstrap。

如果你愿意，可以先在这里接受一个解决方案，然后分叉上面的小提琴，然后你可以重新制定一个针对引导程序的问题。从结构上讲，rowspan/colspan 解决方案是 100% 正确的，现在您的挑战显然在于引导程序。

根据您的编辑，我添加了 CSS 解决方案。不要抗拒 row/colspan 方法：这确实是最好的方法。