Question

我想制作一个看起来像这样的表

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

td＆＃34;长文＆＃34;与1,2,3和4列共享相同的tr。如何强制td移动到＆＃34;下一行＆＃34;在同一个tr？

我试图在＆＃34; Long Text＆＃34;的td中加上{display：block}属性。按照这种方式http://jsfiddle.net/hDsts/。但是，它没有用。

这有什么好的解决方案吗？

Answer 1

＆＃13;

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

＆＃13;

喜欢这个吗？

你有rowspan和colspan。

rowspan执行此操作：

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

Answer 2

你可以像这样使用colspan属性

<table cellspacing=0 cellpadding=2>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td colspan=4>Long text</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td colspan=4>Long text</td>
    </tr>
</table>

和边框的CSS

td {
    border: 1px dotted;
}

fiddle

Answer 3

您可以使用HTML标记rowspan。

http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

在同一tr中的下一行显示td元素

3 个答案: