Question

我正在尝试使用固定行标题创建表格（因此在滚动列标题停留期间），我已经能够实现但现在表标题未对齐到下面的行。我还为此创建了jsfiddle。目前输出如下：

enter image description here

以下是提取HTML的示例。

<head>
    <style>
        table
        {
            /*background-color: #aaa;*/
            width: 800px;
        }
        tbody
        {
            /*background-color: #ddd;*/
            height: 200px;
            width: 800px;
            overflow: auto;
        }
        td
        {
        }

        thead > tr, tbody
        {
            display: block;
        }
    </style>
</head>
   <body>
    <div id="containerdiv" style="width: 800px">
        <table id="dynamictable">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Title
                    </th>
                    <th>
                        Media Title
                    </th>
                    <th>
                        Broadcast Time
                    </th>
                    <th>
                        Destination
                    </th>
                    <th>
                        Channel
                    </th>
                    <th>
                        Start Time
                    </th>
                    <th>
                        End Time
                    </th>
                </tr>
            </thead>
            <tbody id="tablebody">
                <tr id="0">
                    <td>
                        ID: 0
                    </td>
                    <td>
                        Some Content
                    </td>
                    <td>
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
                <tr id="1">
                    <td >
                        ID: 1
                    </td>
                    <td>
                        Some Content
                    </td>
                    <td>
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
                <tr id="Tr1">
                    <td>
                        ID: 1
                    </td>
                    <td>
                        Some Content
                    </td>
                    <td>
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

Answer 1

不要将thead > tr, tbody设置为显示：block。如果删除该行，它应该有效。

默认情况下，<tbody>有display:table-row-group，<tr>有display:table-row。您希望将其保留为默认值。

Answer 2

试试这个：

HTML：

<body>
    <div id="containerdiv" style="width: 800px">
        <table id="dynamictable">
                <tr>
                    <td style="width: 100px">
                        ID
                    </td>
                    <td style="width: 300px">
                        Title
                    </td>
                    <td style="width: 300px">
                        Media Title
                    </td>
                    <td>
                        Broadcast Time
                    </td>
                    <td>
                        Destination
                    </td>
                    <td>
                        Channel
                    </td>
                    <td>
                        Start Time
                    </td>
                    <td>
                        End time
                    </td>
                </tr>
        </table>
        <div class="scroll">
        <table id="tablebody">
                <tr id="0">
                    <td style="width: 100px">
                        ID: 0
                    </td>
                    <td style="width: 300px">
                        Some Content
                    </td>
                    <td style="width: 300px">
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
                <tr id="1">
                    <td style="width: 100px">
                        ID: 1
                    </td>
                    <td style="width: 300px">
                        Some Content
                    </td>
                    <td style="width: 300px">
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
                <tr id="Tr1">
                    <td style="width: 100px">
                        ID: 1
                    </td>
                    <td style="width: 300px">
                        Some Content
                    </td>
                    <td style="width: 300px">
                        Some more contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                    <td>
                        Some more contents contents contents
                    </td>
                </tr>
        </table>
        </div>
    </div>
</body>

CSS：

 table
        {
            /*background-color: #aaa;*/
            width: 780px;
        }

.scroll {
    height: 200px;
    width: 800px;
    overflow: scroll;
    overflow-x: hidden;
    border: 1px solid #ccc;
}
#dynamictable {
     font-weight: bold;   
}
}

http://jsfiddle.net/zyjSf/4/

Answer 3

您似乎必须为td和th设置宽度。否则表布局引擎会陷入困境。

编辑：试试这个fiddle。

将表标题与行对齐

3 个答案: