Question

我正在创建一个固定的标头表，但标题和数据似乎没有对齐。该表是动态创建的。以下是生成的html示例 -

你认为我应该怎么做？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title></title>
    <style>
        /*spreadsheet*/

        .row:nth-child(odd)
        {
            background: rgba(0,0,0,0.05);
        }
        /* Similarly we can define another rule for even */

        .bodyTable td
        {
            white-space: normal; /*text-overflow: ellipsis;*/
            overflow: hidden;
            word-spacing: normal;
            font-family: Sans-Serif;
            font-size: 14px;
            text-align: right;
        }

        .bodyTable tr
        {
            height: 20px;
        }

        .bodyTable tr:hover
        {
            background-color: rgba(0,0,0,0.3);
        }

        .headerTable
        {
            text-align: justify;
            vertical-align: middle;
            word-spacing: normal;
            border-spacing: 0px;            
            border-style: solid;
            caption-side: top;
            word-wrap:break-word;
            border-collapse: collapse;
            font-family: Sans-Serif;
            font-size: 10px;
        }

        .th
        {
            background-color: Red;
        }

        .scroll
        {
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="tableTag">
        <table width="1903px">
            <tr>
                <td>
                    <table class="headerTable" width="1878px">
                        <tr>
                            <th>
                                sample1
                            </th>
                            <th>
                                sample2
                            </th>
                            <th>
                                sample3
                            </th>
                            <th>
                                sample
                            </th>
                            <th>
                                testsample
                            </th>
                            <th>
                                column2
                            </th>
                            <th>
                                column3
                            </th>
                            <th>
                                column4
                            </th>

                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">
                    <div class="scroll" width="1903px" style="height: 200px;">
                        <table class="bodyTable" border="0" width="1878px" height="200px" style="table-layout: fixed">
                            <tbody>
                                <tr class="row">
                                    <td>
                                        54.29204
                                    </td>
                                    <td>
                                        76.806827
                                    </td>
                                    <td>
                                        31.127742
                                    </td>
                                    <td>
                                        -0.409866
                                    </td>
                                    <td>
                                        2.965601
                                    </td>
                                    <td>
                                        6.696099
                                    </td>
                                    <td>
                                        - 0.947771
                                    </td>
                                    <td>
                                        9.713368
                                    </td>

                                </tr>
                                <tr class="row">
                                    <td>
                                        72.082179
                                    </td>
                                    <td>
                                        68.104432
                                    </td>
                                    <td>
                                        16.588382
                                    </td>
                                    <td>
                                        - 0.564589
                                    </td>
                                    <td>
                                        5.759212
                                    </td>
                                    <td>
                                        7.916862
                                    </td>
                                    <td>
                                        - 0.706712
                                    </td>
                                    <td>
                                        3.840213
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

你可以做的一个简单的解决方案是，如果知道每个表中都有8列（就像你的示例代码中那样），你可以将header-table列和body-table列设置为相同的宽度，这样它们就可以了正确对齐。在这种情况下，使用8列，您可以使用width:12.5%，因此每个列的宽度相同。 CSS代码看起来像这样：

.headerTable th {
     background-color: lightblue;
     width:12.5%;
}
.bodyTable td {
     white-space: normal; /*text-overflow: ellipsis;*/
     overflow: hidden;
     word-spacing: normal;
     font-family: Sans-Serif;
     font-size: 14px;
     text-align: right;
     width:12.5%;
}

创建固定的标头表html

1 个答案: