html - 将表格栏分为三部分

原文 标签 html css html-table

将底部的行分为三部分时遇到问题。通过修复或重新设计,我将对此有所帮助。

HTML:

<table border="1" cellspacing="0">
    <tr>
        <td style='width:120px; height:20px;'>Creeper</td>

        <td rowspan="2" style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td rowspan="2" style='width:100px;'>Creeper</td>
    </tr>

    <tr>
        <td style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td style='width:40px; height:20px;'></td>

        <td style='width:80px; height:20px;'></td>
    </tr>
</table>


JSFiddle

http://jsfiddle.net/j76bY/

最佳答案

如下更新表。

<table border="1" cellspacing="0">
<tr>
    <td colspan="2" style='width:120px; height:20px;'>Creeper</td>

    <td rowspan="2" style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td rowspan="2" colspan="2" style='width:100px;'>Creeper</td>
</tr>

<tr>
    <td style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td style='width:40px; height:20px;'></td>
    <td style='width:80px; height:20px;'></td>
    <td style='width:120px; height:20px;'></td>
</tr>
</table>


DEMO

关于html - 将表格栏分为三部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24978557/

相关文章:

html - 从输入网址到浏览器的地址栏以获取浏览器中呈现的页面的完整过程是什么?

javascript - 有没有一种方法可以仅使用HTML/CSS隐藏基于特定值的数据单元格?

javascript - 是否可以在javascript中创建在刷新页面时不会更改的变量?

html - 使用 Bootstrap 在警报内定位按钮

html - 由于某种原因,我的scss文件不会加载到github html页面上

css - 如何让css3动画永远循环

html - 为什么我所有的列都放在一列中?

javascript - HTML表未按预期运行

java - 如何使用jdbc中断表中的列

html - 如何控制 flexbox 中每列的元素数?