IAC93
Reputation: 139
How to sticky table header and first column of table
I am trying to achieve the header column to be stuck to the top and I want the first column(after the header) to be stuck as well so what should happen is this
:
This is what I have so far, I can't seem to get the rest to work. I've tried numerous methods. I am designing it for a mobile view to align the static top header with the content in the table, I am relatively new to CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="root">
<div>
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
<th>head10</th>
<th>head11</th>
<th>head12</th>
<th>head13</th>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
table tbody, table thead {
display: block;
}
table thead {
width: 600px;
}
table tbody {
overflow: auto;
height: 100px;
width: 600px;
}
EDIT: Corrected to row from column. Brain fart!
EDIT 2: Picture for clarification
Upvotes: 2
Views: 231
Answers (1)
Elydasian
Reputation: 2066
Ok, I updated it a little:
It's not perfect, but it is what you wanted.
What have I done?
I made 2 tbodys and placed them in separate tables, then moved the tables in the right position bellow the main header, and that's it.
Hope I could help.
Snippet:
table tbody, table thead {
display: block;
}
table thead {
width: 600px;
}
table tbody {
overflow: auto;
height: 100px;
width: 600px;
}
#tb1 {
width:50px;
height:130px;
margin-Left: 10px;
}
#tb2 {
right:100px;
width:570px;
height:105px;
}
.one {
float: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="root">
<div>
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
<th>head10</th>
<th>head11</th>
<th>head12</th>
<th>head13</th>
</thead>
</table>
<table>
<div class="one">
<tbody id="tb1">
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</tbody>
</div>
</table>
<table style="float:left; margin-Top:-135px; margin-Left:50px;">
<div class="two">
<tbody id="tb2">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
</body>
</html>Upvotes: 2
Related Questions
- table with sticky header and horizontal scroll
- How to make table header with 2 rows sticky?! (without js)
- Sticky table header with two header rows
- sticky header with HTML table
- HTML table with two sticky columns and headers (using only CSS)
- How to make head of css table sticky
- Sticky header for table
- What's the best way to have a table with sticky header?
- Sticky row and column header in table
- Sticky header of table with sticky table column