0

我正在尝试创建具有固定行标题的表（因此在滚动列标题停留期间），我已经能够实现这一点，但现在表标题未与下面的行对齐。我还为此创建了一个jsfiddle。目前的输出是这样的：

在此处输入图像描述

这是提取的 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>
4

3 回答 3

4

不要设置thead > tr, tbody为显示：阻止。如果您删除该行，它应该可以工作。

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

于 2013-09-03T20:08:05.750 回答
1

试试这个：

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/

于 2013-09-03T20:24:10.063 回答
0

看起来您必须为td和设置宽度th。否则表格布局引擎会出现问题。

编辑：试试这个小提琴。

于 2013-09-03T20:24:01.940 回答