DIV floating above a TH for a scrolling table with fixed headers, but I can't center the header

Question

Using the suggestions of this fiddle I made a scrolling table with fixed headers:

<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
    <meta charset='UTF-8' />
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style>
        body {
            font-family: sans-serif;
            font-size: 20px;
        }

        section {
            position: relative;
            border: 1px solid #000;
            padding-top: 2em;
            background: #808;
        }

        #container {
            overflow-y: auto;
            height: 200px;
            padding-top: 1em;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
        }

        th {
            height: 10px;
            line-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            color: transparent;
            background: #0f0;
            border: 2px solid #f0f;
            white-space: nowrap;
        }

            th > div {
                position: absolute;
                background: #ff0;
                color: #00f;
                padding: 1em;
                top: 0;
                margin-left: auto;
                line-height: normal;
                border: 3px solid #805;
                opacity: 0.5;
            }

        td {
            border-bottom: 3px solid #666;
            background: #fdd;
            color: #c0c;
            padding: 1em;
        }

            td:first-child {
                border-right: 1px solid #aaa;
                font-family: serif;
                text-align: center;
            }

            td:last-child {
                border-left: 1px solid #aaa;
            }
    </style>
    <title>test</title>
</head>
<body>
    <div>

        <section>

            <div id='container'>

                <table>
                    <thead>
                        <tr class='header'>
                            <th>
                                head 100
                                <div id='h1'>head 1</div>
                            </th>

                            <th>
                                head 2
                                <div id='h2'>head 2</div>
                            </th>

                            <th>
                                head last
                                <div id='hL'>head last</div>
                            </th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>Aardvark</td>
                            <td>beta<br />longer text<br />spanning on some lines</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta<br />long text</td>
                            <td>omega and something else</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>


                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega just to finish</td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </section>
    </div>
</body>
</html>

The scrolling works smoothly, as you can test on https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ but it has an aesthetic issue: the header of the columns are not centered.

The TH height will be set to 0 and its borders will be removed: now it has an ugly color just to see it during the debug phase.

I tested many solutions, and some of them are commented away in the fiddle:

with width: -moz-available; every header starts at the correct position, but all of them end at the right side of the table; I added the opacity: 0.5; so this behavior can be clearly seen
with width: 100%; the DIV takes the width of the whole table, not of the parent TH
with width: inherit; nothing happens (the DIV inside the TH don't inherit the TH width)
the margin-left: auto; margin-right: auto; trick doesn't give a result

Even using two nested DIV inside the TH is not a solution, since at least the outer one must fill the TH, which is not the case.

The number of columns is not determined a priori, because the table will receive data from a database, and it's up to users to decide which columns will be shown. This also prevents me to use fixed widths.

How can I center that DIV inside the TH width?

why don't you put the "header" above the table, so it can't move while scrolling the table... Is there any reason why it must be inside the table in the th-elements? — SaschaP, Mar 11 '15 at 22:43
I've checked tons of pages, and the solution I found looked the best, for me. I unsuccessfully tried to put the header out the table. — Marco Bernardini, Mar 12 '15 at 01:40

pschueller · Accepted Answer · 2015-03-12T03:07:40.543

2

Short answer: you can't.

Your divs are positioned absolutely which removes them from the regular flow of the document, hence the width of the parent can have no effect.

You could center them if the divs were absolute in relation to their parent... however, you cannot set your parent's position to relative, because the divs will then appear inside of the #container element which has its overflow hidden. If you nudge them up to where they should be, they will no longer be visible. Not to mention that you would not be able to fix them to the top.

I can think of no good way of doing this using only CSS, especially if the number and width of columns is not fixed.

edited Mar 12 '15 at 03:07

answered Mar 11 '15 at 22:50

pschueller

4,362
2
27
50

Uhm… if I apply a monospaced font to the tables, then I get the longest strings in the result, I can create a first table with just the headers for those strings (hiding them), glued above a second one with the results and its own scrollbar, but this can work just if the text don't wrap. And it seems a waste of server resources. – Marco Bernardini Mar 12 '15 at 01:52

DIV floating above a TH for a scrolling table with fixed headers, but I can't center the header

1 Answers1