Fix First Column of a Bootstrap Table

Asked
Active3 hr before
Viewed126 times

7 Answers

tablecolumnfirst
90%

Ok.. Remove all your js code and you can do this with some CSS tricks as below:,Just add position:sticky to th & td first-child.,The following style will create a stripped table with the first column fixed:,Connect and share knowledge within a single location that is structured and easy to search.

th: first - child, td: first - child {
   position: sticky;
   left: 0 px;
   background - color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
   <tr>
      <th>TIME</th>
      <th>Company</th>
      <th>Company</th>
      <th>Company</th>
      <th>Company</th>
      <th>Company</th>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
   </tr>
   <tr>
      <td>11:40 </td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
   </tr>
</table>
load more v
88%

Table Fixed columns extension of Bootstrap Table.,Set true to enable fixed columns., Detail: Set true to enable fixed columns. ,The number of the left fixed columns.

<link rel="stylesheet" href="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
<script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
load more v
72%

Here’s a video example of a table that sticks both the header and first column:,Get the CSS-Tricks newsletter,You could set also 2nd column sticky, just need to know its position from the left. In other words, you need to know the size of the 1st column.,“you can’t position tr or thead” is not true in Firefox/Safari, and is a crbug.com/702927 in Chrome. Chrome’s table rewrite is almost done, and with it, sticky bug will be fixed.

load more v
65%

When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.,This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:,Please refer to the DataTables documentation for full information about its API properties and methods. Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.,In addition to the above code, the following Javascript library files are loaded for use in this example:

Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.

FixedColumns is initialised using the constructor new $.fn.dataTable.FixedColumns(); - shown below.

new $.fn.dataTable.FixedColumns();
load more v
75%

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.,Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.,Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.,Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

<table class="table">
   <thead>
      <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>
load more v
40%

I am targeting mobile specifically so I have a Bootstrap responsive table. Its just a div with the bootstrap class "table-responsive" and a table nested inside with the classes "table table-striped table-bordered table-hover table-condensed".,If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absolute so it appears "in front" when you scroll the rest of the table. ,Is there any easy way to make sure that the first column is fixed (not scrolling horizontally)? On mobile devices, its likely that there will be scrolling every time but the first column contains what are essentially table headers.

jQuery

$(function() {
   var $table = $('.table');
   //Make a clone of our table
   var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

   //Remove everything except for first column
   $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

   //Match the height of the rows to that of the original table's
   $fixedColumn.find('tr').each(function(i, elem) {
      $(this).height($table.find('tr:eq(' + i + ')').height());
   });
});
load more v
22%

How to set fixed width for <td> in a table ?,How to fix the height of rows in the table?,By default, the dimensions of the rows and columns in a table are adjusted by the browser automatically in a way that fits the contents. However, there can be situations where the width of the columns are needed to be fixed. There are multiple ways to fix the width for <td> tag. Some of them are mentioned below: ,How to create footer to stay at the bottom of a Web page?

Other "table-column" queries related to "Fix First Column of a Bootstrap Table"