html表格标题的未对齐高度

时间：2019-07-20 11:57:43

标签： html html-table

为什么第一列（ NUM ）和第二列（ DEPARTMENT ）中的表头与其他表头的其余部分不对齐？

enter image description here

HTML：

<table width="100%">

    <thead>
        <tr role="row" bgcolor="#FF5733">

            <th colspan="1" rowspan="3" width="1%">
                <label>NUM.</label>
            </th>
            <th rowspan="3" width="30%">
                <label>DEPARTMENT</label>
            </th>

        </tr>

        <tr role="row" bgcolor="#FF5733">

            <th colspan="2" rowspan="1">
                <label>CAPITAL PROPERTY</label>
            </th>
            <th colspan="2" rowspan="1">
                <label>INVENTORY</label>
            </th>
            <th colspan="2" rowspan="1">
                <label>CAPITAL PROPERTY</label>
            </th>
            <th colspan="2" rowspan="1">
                <label>INVENTORY</label>
            </th>

        </tr>

        <tr role="row" bgcolor="#FF5733">

            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
                        <label>COST</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
                <label>QUANTITY</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
                <label>COST</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
                <label>QUANTITY</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
                <label>COST</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
                <label>QUANTITY</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
                <label>COST</label>
            </th>
            <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
                <label>QUANTITY</label>
            </th>

        </tr>
    </thead>

    <tbody>
        <tr role="row">

            <td>1</td>
            <td>IT Dept.</td>
            <td>0.00</td>
            <td>0</td>
            <td>0.00</td>
            <td>0</td>
            <td>2,863,184.70</td>
            <td>265</td>
            <td>55,229.00</td>
            <td>89</td>

        </tr>
    </tbody>

    <tfoot>
        <tr bgcolor="#FF5733">

            <td colspan="2" rowspan="1">TOTAL</td>
            <td colspan="1" rowspan="1">0.00</td>
            <td colspan="1" rowspan="1">0</td>
            <td colspan="1" rowspan="1">0.00</td>
            <td colspan="1" rowspan="1">0</td>
            <td colspan="1" rowspan="1">2,863,184.70</td>
            <td colspan="1" rowspan="1">265</td>
            <td colspan="1" rowspan="1">55,229.00</td>
            <td colspan="1" rowspan="1">89</td>

        </tr>
    </tfoot>
</table>

这是jsfiddle： https://jsfiddle.net/2xasogpq/

从jsfiddle中可以看到，没有涉及外部CSS。在chrome和firefox上，表格标题高度不均匀。请帮我。预先感谢。

3 个答案:

答案 0 :(得分：3)

均等

与CAPITAL PROPERTY相比，DEPARTMENT列的高度更高，因为为CAPITAL PROPERTY行创建了单独的tr标签。

<table width="100%">

<thead>
    <tr role="row" bgcolor="#FF5733">

        <th colspan="1" rowspan="3" width="1%">
            <label>NUM.</label>
        </th>
        <th rowspan="3" width="30%">
            <label>DEPARTMENT</label>
        </th>

        <th colspan="2" rowspan="1">
            <label>CAPITAL PROPERTY</label>
        </th>
        <th colspan="2" rowspan="1">
            <label>INVENTORY</label>
        </th>
        <th colspan="2" rowspan="1">
            <label>CAPITAL PROPERTY</label>
        </th>
        <th colspan="2" rowspan="1">
            <label>INVENTORY</label>
        </th>
    </tr>
    <tr role="row" bgcolor="#FF5733">
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
                    <label>COST</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
            <label>QUANTITY</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
            <label>COST</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
            <label>QUANTITY</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
            <label>COST</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
            <label>QUANTITY</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="COST: activate to sort column ascending">
            <label>COST</label>
        </th>
        <th tabindex="0" colspan="1" rowspan="1" aria-controls="tbl_penerimaan" aria-label="QUANTITY: activate to sort column ascending">
            <label>QUANTITY</label>
        </th>
    </tr>
</thead>
<tbody>
    <tr role="row">
        <td>1</td>
        <td>IT Dept.</td>
        <td>0.00</td>
        <td>0</td>
        <td>0.00</td>
        <td>0</td>
        <td>2,863,184.70</td>
        <td>265</td>
        <td>55,229.00</td>
        <td>89</td>
    </tr>
</tbody>
<tfoot>
    <tr bgcolor="#FF5733">
        <td colspan="2" rowspan="1">TOTAL</td>
        <td colspan="1" rowspan="1">0.00</td>
        <td colspan="1" rowspan="1">0</td>
        <td colspan="1" rowspan="1">0.00</td>
        <td colspan="1" rowspan="1">0</td>
        <td colspan="1" rowspan="1">2,863,184.70</td>
        <td colspan="1" rowspan="1">265</td>
        <td colspan="1" rowspan="1">55,229.00</td>
        <td colspan="1" rowspan="1">89</td>
    </tr>
</tfoot>
</table>

答案 1 :(得分：1)

原因是rowspan的值。由于 NUM 和 DEPARTMENT 列的值为3，这意味着它们将跨越三行。由于这是它们的大小，因此它们未对齐您的table。如果希望这些列成为第一行，只需将rowspan设置为1。

答案 2 :(得分：1)

您的问题是单元格间距。您需要添加一些CSS来解决此问题。

table{
  border-collapse: collapse;
  border-spacing: 0;
}
td,th{
  border: 2px solid white;
}

提要：requireEnd

相关问题
最新问题