Menu
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:
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 seenwidth: 100%; the DIV takes the width of the whole table, not of the parent TH
width: inherit; nothing happens (the DIV inside the TH don't inherit the TH width)margin-left: auto; margin-right: auto; trick doesn't give a resultEven 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?
246
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.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
