HTML table with horizontal scrolling (first column fixed)
I have a similar table styled like so:
<table style="width:100%; table-layout:fixed">
<tr>
<td style="width: 150px">Hello, World!</td>
<td>
<div>
<pre style="margin:0; overflow:scroll">My preformatted content</pre>
</div>
</td>
</tr>
</table>
HTML Table first column fixed while scrolling horizontal
It will take some tweaking, but I've successfully done a "sticky column" by using position: sticky on the table cells you'd like to stay in place:
#customers td:nth-child(1),
#customers th:nth-child(1) {
position: sticky;
left: 0;
}
This lets things horizontally scroll underneath the first column.
Fix columns in horizontal scrolling
SOLVED
https://jsfiddle.net/DJqPf/7/
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:250px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
left: 5px
}
UPDATE
$(function () {
$('.table-wrapper tr').each(function () {
var tr = $(this),
h = 0;
tr.children().each(function () {
var td = $(this),
tdh = td.height();
if (tdh > h) h = tdh;
});
tr.css({height: h + 'px'});
});
});body {
position: relative;
}
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
width:200px;
margin-left: 120px;
}
td, th {
padding: 5px 20px;
width: 100px;
}
tbody tr {
}
th:first-child {
position: absolute;
left: 5px
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>SOME RANDOM TEXT</h1>
</div>
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan is an awesome month</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Mar</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Apr</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>May</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jun</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</body>
</html>How do I create an HTML table with a fixed/frozen left column and a scrollable body?
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
Relevant HTML & CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>HTML table with horizontal scrolling (four columns fixed)
CSS:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
padding:10px;
width:100px;
}
.col1{
position:absolute;
*position: relative; /*ie7*/
left:0;
width:100px;
}
.col2{
position:absolute;
*position: relative; /*ie7*/
left:100px;
width:100px;
}
.col3{
position:absolute;
*position: relative; /*ie7*/
left:200px;
width:100px;
}
.col4{
position:absolute;
*position: relative; /*ie7*/
left:300px;
width:100px;
}
.outer {position:relative}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:500px;
margin-left:400px;
}
Html:
<div class="outer">
<div class="inner">
<table>
<tr>
<th class="col1">Header A</th>
<th class="col2">Header A</th>
<th class="col3">Header A</th>
<th class="col4">Header A</th>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td>col 5 - A</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header B</th>
<th class="col2">Header B</th>
<th class="col3">Header B</th>
<th class="col4">Header B</th>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td>col 5 - B</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header C</th>
<th class="col2">Header C</th>
<th class="col3">Header C</th>
<th class="col4">Header C</th>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td>col 5 - C</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
</table>
</div>
</div>
https://jsfiddle.net/h75zn59o/
Position:absolute; is what causes that first header column to be fixed. With the original CSS, it's just applied to "th", but using classes (in this example, col1, col2, etc.) we can assign different fixed positions to different columns. Because the columns are 100px wide, each following column is positioned another 100px left So, the first one is 0px, then 100px for col2, etc) to avoid overlap with the previous column.
html table horizontal scroll enabling for specific columns
I think the most simple and logical way to fix columns according to @Circuit Breaker answer is
.view { margin: auto; width: 600px;}
.wrapper { position: relative; overflow: auto; border: 1px solid black; white-space: nowrap;}
.sticky-col { position: sticky; position: -webkit-sticky; background-color: white;}
.first-col { width: 100px; min-width: 100px; max-width: 100px; left: 0px; }
.second-col { width: 150px; min-width: 150px; max-width: 150px; left: 100px; }<div class="view"> <div class="wrapper"> <table class="table"> <thead> <tr> <th class="sticky-col first-col">Number</th> <th class="sticky-col second-col">First Name</th> <th>Last Name</th> <th>Employer</th> </tr> </thead> <tbody> <tr> <td class="sticky-col first-col">1</td> <td class="sticky-col second-col">Mark</td> <td>Ham</td> <td>Micro</td> </tr> <tr> <td class="sticky-col first-col">2</td> <td class="sticky-col second-col">Jacob</td> <td>Smith</td> <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td> </tr> <tr> <td class="sticky-col first-col">3</td> <td class="sticky-col second-col">Larry</td> <td>Wen</td> <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td> </tr> </tbody> </table> </div></div> Table that scrolls horizontally but with fixed first column
Check this code. I have created a class for fixed columns and gave a padding for second child. Demo
body { color: white;}
.search-table-outter { width: auto; max-width: 735px; margin-left: 5em; margin-right: auto; padding-top: 30px;}.search-table{ table-layout: fixed; margin:0px auto 0px auto; background-color: lightblue}.search-table, td, th{ border-collapse:collapse; border-bottom:1px solid white; line-height: 10px;}th{ padding:5px 10px; font-size:15px; }td{ padding:5px 10px; height:35px;}.search-table-outter { overflow-x: scroll; }th, td { min-width: 100px; text-align: center; }
.fixed { position: absolute; left: auto; top: auto; background-color: lightblue; margin: 1px;}
.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) { padding-left: 150px;}<div class="container header"><div class="search-table-outter wrapper"> <table class="search-table inner"> <tr> <th class="fixed">Time</th> <th>Icon</th> <th>Description</th> <th>Temp</th> <th>Precip</th> <th>Wind</th> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> <tr> <td class="fixed">4:11 </td> <td>Cloud </td> <td>Partly Cloudy </td> <td>86 </td> <td>0% </td> <td>8.38 mph </td> </tr> </table></div></div>Make one column fixed with horizontal scroll using Bootstrap?
What you want to do is set the position of your first column to absolute. This will need to be applied to the first <td> tag in every row you have - easily done with a class. This also needs a width, and then a negative left margin of equal value to the width so that it gets placed on the left of your scrolling content.
You then need to create a wrapper for your table, and set its overflow-x to scroll. This allows your table to scroll. This, too, requires a width - anything beyond the width will be scrollable.
The last thing you will probably want to do is add white-space: nowrap to your <th> and <td> elements, so that the text in the cells do not wrap.
Demo Here
th, td {
white-space: nowrap;
}
.first-col {
position: absolute;
width: 5em;
margin-left: -5em;
}
.table-wrapper {
overflow-x: scroll;
width: 600px;
margin: 0 auto;
}
<div class="container">
<div class="table-wrapper">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="first-col">#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first-col">ID 1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td class="first-col">ID 2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
Related Topics
Regular Expression For Extracting Tag Attributes
How to Get Folder Directory from HTML Input Type "File" or Any Other Way
What Is the HTML Tabindex Attribute
CSS Background-Size: Cover Replacement for Mobile Safari
How to Run an External Program, E.G. Notepad, Using Hyperlink
Position Absolute and Overflow Hidden
Add Padding at the Beginning and End of Each Line of Text
How to Allow Only One Radio Button to Be Checked
How to Get the HTML Code from Webview
Prevent Bootstrap Modal from Disappearing When Clicking Outside or Pressing Escape
Embed Image in a ≪Button≫ Element
Google Fonts Are Not Rendering on Google Chrome
Ordered List (Html) Lower-Alpha With Right Parentheses
Empty Vertical Space Between Columns in Bootstrap 4