有关html table的布局问题，请问这种表头如何实现？

发布于
2017-09-18

想实现如下图的表头：
图片描述

左边：公司名称占2rowspan，地址跟邮编各占1rowspan;
中间：表格题目占4rowspan;
右边：Date和BDE各占2rowspan;

现在想到的代码如下：

    <table class="gridtable">
        <tr>
            <td colspan="3" rowspan="2">Goldcopy Inc.</td>
            <td colspan="9" rowspan="4">SALES ORDER</td>
            <td colspan="1" rowspan="2">Date:</td>
            <td colspan="2" rowspan="2"></td>
        </tr>
        <tr></tr>
        <tr>
            <td colspan="3">6-8652 Joffre Ave Burnaby</td>
            <td colspan="1" rowspan="2">BDE: </td>
            <td colspan="2" rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="3">Burnaby, BC V5J 3J5</td>
        </tr>
        <tr>
            <td colspan="15"></td>
        </tr>
    </table>

可是结果如下：
图片描述

期望占2个rowspan的区域只有BDE那一块，其他都比期望占少了1rowspan，所以想知道这种布局如何实现。

html

html5 css

阅读 3.4k

3 个回答

✓ 已被采纳

table布局要设置宽度和高度

 <style>
        *{margin: 0; padding: 0}
       table{
           width: 800px;
           background-color: #23caff;
       }
        table td{
            background-color: #fff;
        }
    </style>
<table cellspacing="1" >
    <tr>
        <td rowspan="2" width="30%" height="48px">1</td>
        <td rowspan="4" width="40%">2</td>
        <td rowspan="2" width="10%">3</td>
        <td rowspan="2">4</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td height="24px">9</td>
        <td  rowspan="2">11</td>
        <td  rowspan="2">12</td>
    </tr>
    <tr>
        <td height="24px">13</td>
    </tr>
</table>