CODEWITHSUNDEEP
htmlcss
user2711965
user2711965

Reputation: 1825

Align table headers to the rows

I am trying to create table with fixed row headers (so during scrolling the column heading stay) , I have been able to achieve that but now the table headers are not aligned to the rows below. I have also created a jsfiddle for that. Currently the output is like:

enter image description here

Here is the sample extracted 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>

Upvotes: 0

Views: 7977

Answers (3)

andi
andi

Reputation: 6522

Do NOT set thead > tr, tbody to display:block. It should work if you remove that line.

By default, <tbody> has display:table-row-group and <tr> has display:table-row. You want to keep it as those defaults.

Upvotes: 4

Gilly
Gilly

Reputation: 9692

Try this:

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/

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11340

Looks like you have to set a width for both td and th. Otherwise the table layout engine snags.

EDIT: Try this fiddle.

Upvotes: 0

Related Questions