Steve_Chen_LI 2016-10-25 07:28 采纳率: 56.3%
浏览 4370

HTML TABLE TR TD 使用Rowspan 布局错乱 问题

这是做的测试的布局,但是AAAA却被挤在下面,原始需求为,AAAA在AAAA数据那一行。
为什么合并 “AAA”之后,后面的 "AAAA" 不能现在在同一条 “TR” 下,而是直接挤开, 可以排除table大小原因,因为是自适应的。
图片说明

 <table border="1" width="1000px" height="100px" bordercolor="#FF0000">
<tr>
    <td rowspan="5" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#00CC99">AAAA</td>
    <td rowspan="5" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#00CC99">AAAA</td>
    <td rowspan="5" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#00CC99">AAAA</td>
        <tr>
        <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">AAA</td>
        </tr>
        <tr>
        <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">AAA</td>
        </tr>
        <tr>
        <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">AAA</td>
        </tr>
        <tr>
        <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">AAA</td>
        </tr>
    <td rowspan="5" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid;" bgcolor="#00CC99">AAAA</td>
<tr>
    <td rowspan="3" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#CC0066">BBBB</td>
    <td rowspan="3" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#CC0066">BBBB</td>
    <td rowspan="3" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#CC0066">BBBB</td>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">BBB</td>
    </tr>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">BBB</td>
    </tr>
<tr>
    <td rowspan="6" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#3366CC">CCCC</td>
    <td rowspan="6" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#3366CC">CCCC</td>
    <td rowspan="6" style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid" bgcolor="#3366CC">CCCC</td>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">CCC</td>
    </tr>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">CCC</td>
    </tr>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">CCC</td>
    </tr>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">CCC</td>
    </tr>
    <tr>
    <td  style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid">CCC</td>
    </tr>




 <tr>
    <td rowspan="5">DDDD</td>
    <tr>
    <td>DDD1</td>
    </tr>
    <tr>
    <td>DDD2</td>
    </tr>
    <tr>
    <td>DDD3</td>
    </tr>
    <tr>
    <td>DDD4</td>
    </tr>
    <td>DDD5</td>
    <td>DDD6</td>
    <td>DDD7</td>
    <td>DDD8</td>
    <td>DDD9</td>
 </tr>
</table>
  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2016-10-25 09:13
    关注

    你最后那个td要放到第一个行去

    评论

报告相同问题?

悬赏问题

  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常