Html 在单行上使用colspan

我正在尝试获得特定的表格布局：

---------
| |   | |
---------

如第一个表所示，但只显示行，不显示表头。一旦我将其隐藏，布局（colspan=2）就会“丢失”：

示例代码：

<table border="1" style="width:100%;">
  <thead style="display:fixed">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

<br/>

<table border="1" style="width:100%;">
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

1.
2.
3.
4.
A.
B
C


1.
2.
3.
4.
A.
B
C

---

colspan没有丢失。浏览器正在获取可见单元格并确定其宽度，因为未指定宽度。（基本上是这样的，最好根据每列中的最长值来分配宽度-尽管每个浏览器的实现方式略有不同）

如果希望每个单元格占用宽度的25%，请在cols部分中指定它

1.
2.
3.
4.
A.
B
C

这是我的解决方案

1.
2.
3.
4.
A.
B
C
1.
2.
3.
4.
A.
B
C

由于用户LGSon在对我最初问题的评论中给出了我认为最合适的答案，因此我将其添加到此处作为答案：

这里有一种方法：jsfiddle.net/8v6enhq2/16–2天前的LGSon

---

…这里还有另一个：jsfiddle.net/8v6enhq2/17。。。这是最好的，尽管存在一些跨浏览器的崩溃支持问题–LGSon 2天前

使用

colspan

属性合并通常单独显示的单元格。通过删除标题单元格（用作引用

colspan

的宽度），表格将折叠为三个等宽列。我认为您最好在这里使用

width

属性或控制每个单元格宽度的CSS类这并没有相同的效果：jsfiddle.net/8v6enhq2/2另外，我更喜欢基于colspan的解决方案，因为宽度解决方案要求我知道前面的单元数（和总宽度）。这只是在黑暗中拍摄，但可能尝试

可见性：隐藏

而不是

显示：无

？这可能允许浏览器在没有实际渲染的情况下仍然考虑标题。这是最好的解决方案，尽管在

折叠方面存在一些跨浏览器支持问题，但不幸的是（如果我正确理解了您的解决方案），这不会产生相同的效果：而且我更喜欢基于colspan的解决方案，因为宽度解决方案要求我知道单元格的数量（和总宽度）前面。您希望每列的宽度是多少？如果您确实需要两个表，两个表都具有相同的宽度列，则需要在两个表上设置宽度以获得匹配。我实际上希望行中的单元格与均匀分布的标题行对齐，但不显示标题行。基本上，我想要的是示例中第一个表的行为，但是没有显示thead。啊，好的，我现在明白了。挑战在于，您将无法获得此结果，因为第一个表没有为列指定宽度。。。因此，列宽是任意的。。。因此，试图使另一个表与任意表匹配是行不通的。
<table border="1" style="width:100%;">
  <thead style="display:fixed">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

<br/>

<table border="1" style="width:100%;">
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>