html - 在同一 tr 的下一行显示一个 td 元素

Question

我想做一个像这样的表格

------------------------------------------------------------------------------------  
| Column 1                   | Column 2           | Column 3        | Column 4     |    
| Long Text                                                                        |
------------------------------------------------------------------------------------  
| Column 1                   | Column 2           | Column 3        | Column 4     |    
| Long Text                                                                        |
------------------------------------------------------------------------------------

td“长文本”与第 1、2、3 和 4 列共享相同的 tr。如何强制 td 移动到同一 tr 中的“下一行”？

我试图按照这种方式在“长文本”的 td 中放置一个 {display:block} 属性 http://jsfiddle.net/hDsts/ .但是，它不起作用。

有好的解决方案吗？

Answer 1

<style>td, th{border: 1px solid;}</style>
<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
  </tr>
  <tr>
    <td colspan="4">Verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrry long text ?</td>
  </tr>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
    <td>Col4</td>
  </tr>
  <tr>
    <td colspan="4">Verrrrryyy LONG</td>
  </tr>
</table>

像这样？

你有 rowspan 和 colspan。

rowspan 这样做:

+----------------------+------+------+------+
| Col1                 | Col2 | Col3 | Col4 |
+                      +------+------+------+
|                      | x    | x    | x    |
+                      +------+------+------+
|                      | Col2 | Col3 | Col4 |
+                      +------+------+------+
|                      |      | x    | x    |
+----------------------+------+------+------+