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

标签 html css html-table

我想制作一个如下所示的表格

------------------------------------------------------------------------------------  
| 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 中的“下一行”?

我尝试按照以下方式将 {display:block} 属性放入“长文本”的 td http://jsfiddle.net/hDsts/ 。但是,这不起作用。

有没有好的解决方案?

最佳答案

<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 这样做:

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

关于html - 在同一 tr 的下一行显示 td 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31440831/

相关文章:

Javascript 随机图像旋转器调整图像大小?

html - 链接 <h> 标签元素的标准

html - 包装器未完全显示在页脚中

javascript - HTML JavaScript 延迟下载 img src 直到 DOM 中的节点

html - 我的 HTML 表格产生了奇怪的间隔结果

html - 将 <a> 悬停在 <td> 中更改 <td> 背景图像

最后打印页面的 HTML 页脚

html - 使用 CSS 定位所有跟随 h2 的 p 元素

html - 如何使一个 div 的溢出文本无缝移动到另一个 div

html - 菜单在移动设备上扭曲页面并在右侧创建空白