Fix Columns in Horizontal Scrolling

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>

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>

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.

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.

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>

How to create a horizontally scrolling table with fixed column in Flutter?

Here is a quick example and this would be the result: Video

List<Widget> _buildCells(int count) {
  return List.generate(
    count,
    (index) => Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text("${index + 1}", style: Theme.of(context).textTheme.title),
    ),
  );
}

List<Widget> _buildRows(int count) {
  return List.generate(
    count,
    (index) => Row(
      children: _buildCells(10),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _buildCells(20),
          ),
          Flexible(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: _buildRows(20),
              ),
            ),
          )
        ],
      ),
    ),
  );
}

Responsive horizontal scrolling table with fixed columns

You can try datatable logic, there are some good contributions already available.

Vertical - Horizontal Scrolling HTML Table with fixed columns

Well this guy has the solution @ http://www.jqueryscript.net/table/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html