Question 43851 in Html Question posted in
Some basic documentation can be found here.

Set Up Table Fixed Element with 2 Head – Html

I try to set up a responsive table with 2 fixed header in left, so the body is scrollable but the left header is fixed.

I expect the result is like this

enter image description here

My code:

I add position sticky and z index to each head but the second head from left is override the first head.

<div class="table-responsive" style="padding: 10px 0 0 0; overflow: auto;">
        <table class="table table-hover">
        <col />
        <col />
        <colgroup span="3"></colgroup>
        <thead>
            <tr>
            <th colspan="2"></th>
            <th colspan="31" scope="colgroup" style="text-align: center;">JANUARI</th>
            </tr>
            <tr>
            <th colspan="2" style="width: 10%"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="8" style="position: sticky; left: 0; z-index: 1;" scope="rowgroup">Assy To GFG</th>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Plan</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Act</th>
             // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">F/G</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum P</th>
                // data
            </tr>
            <tr>
                <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum A</th>
               // data 
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Kum F/G</th>
                // data
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc P</th>
                 // data
            </tr>
            <tr>
            <th scope="row" style="position: sticky; left: 0; z-index: 1;">Blc D</th>
                // data
            </tr>
        </tbody>
        </table>
    </div>

But the result is like this
enter image description here

Tags:

4

Answers


  1. 0

    You can achieve this by using JQuery DataTable (as you tagged the question with jquery I will assume you could accept this kind of answer)

    Simply add the jquery datatable plugin and the following script. It will be better if you write an Id for the table

    $(document).ready(function() {
    var table = $('.table ').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            left: 1
        }
    } );
} );

    Functional example and library:
    https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

    When you download or select a CDN, don’t forget check the option "Fixed Columns"
    or you can use the following:

    <link href="https://cdn.datatables.net/v/dt/dt-1.13.4/fc-4.2.2/datatables.min.css" rel="stylesheet"/>
 
<script src="https://cdn.datatables.net/v/dt/dt-1.13.4/fc-4.2.2/datatables.min.js"></script>
    Login or Signup to reply.
  2. 0

    You definitely need to use scripts here.
    You can do without plugins. The bottom line is that you need to set the same height for the rows of the tables. Something like this 👇:

    setSizeTables();
$(window).on('resize', setSizeTables);

function setSizeTables(){
  $('.scroll-x-table').each(function(){
    const table = $(this);
    const wrapp = table.closest('.scroll-x-table-wrapp');
    const ths = wrapp.find('.scroll-x-ths');
    wrapp.find('tr').css('height', 0);
    ths.find('tr').each(function(index){
      const tr = $(this);
      const tableTr = table.find('tr').eq(index);
      const trHeight = Math.ceil( tr.height() );
      const tableTrHeight = Math.ceil( tableTr.height() );
      const largeHeight = trHeight > tableTrHeight ? trHeight : tableTrHeight;
      tr.height(largeHeight);
      tableTr.height(largeHeight);
    })
  })
}
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.scroll-x-table-wrapp {
  --width: 600px;
  --ths-width: 100px;
  --border-color: #ccc;
  --bg-color: #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  width: var(--width);
  font-size: 16px;
  line-height: 1.4;
}
.scroll-x-ths {
  flex: none;
  width: var(--ths-width);
  border-collapse: collapse;
  border-spacing: 0;
}
.scroll-x-ths td {
  padding: 8px;
  text-align: right;
  border: solid 1px var(--border-color);
  background-color: var(--bg-color);
}
.scroll-x-table-body {
  flex: auto;
  min-width: 1px;
  overflow-x: auto;
  border-right: solid 1px var(--border-color);
}
.scroll-x-table {
  border-collapse: collapse;
  border-spacing: 0;
}
.scroll-x-table thead {
  background-color: var(--bg-color);
}
.scroll-x-table td {
  padding: 8px;
  border: solid 1px var(--border-color);
  min-width: 200px; /* optional */
}
.scroll-x-table td:first-child {
  border-left: 0;
}
.scroll-x-table td:last-child {
  border-right: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-x-table-wrapp">
  <table class="scroll-x-ths">
    <thead>
      <tr>
        <td></td>
      </tr>
    </thead>
    <tr>
      <td>a1</td>
    </tr>
    <tr>
      <td>a2</td>
    </tr>
    <tr>
      <td>a3</td>
    </tr>
  </table>
  <div class="scroll-x-table-body">
    <table class="scroll-x-table">
      <thead>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>da<br>ta</td>
          <td>da<br>ta</td>
          <td>da<br>ta</td>
          <td>da<br>ta</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
    Login or Signup to reply.
  3. 0 
    .tableFixHeader {
  overflow: auto;
  width:100%;
}

.tableFixHeader table {
  border-collapse: collapse;
  width: 100%;
}
.tableFixHeader tr th, .tableFixHead tr td {
  padding: 7px 14px;
  border:1px solid #dfdfdf;
}
.tableFixHeader tr td{
padding: 7px 14px;
  border:1px solid #dfdfdf;
}

.tableFixHeader tr td:first-child, .tableFixHeader tr th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  background-color:#efefef;
  border-left:1px solid #dfdfdf;
  border-right:1px solid #dfdfdf;
}
.tableFixHeader tr td:nth-child(1),.tableFixHeader tr th:nth-child(1)  { 
position:sticky;
  left:0px;
  z-index:1;
  background-color: #efefef;
   border-left:1px solid #dfdfdf;
   border-right:1px solid #dfdfdf;
  }
.tableFixHeader th {
  position: sticky;
  top: 0;
  background: #efefef;
  z-index:2
}
.tableFixHeader tr th:first-child , .tableFixHeader tr th:nth-child(1) {
  z-index:3
  }
    <div class="tableFixHeader">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>a#</th>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
        <th>07</th>
        <th>08</th>
        <th>09</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>a1</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a2</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a3</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a4</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a5</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a6</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a7</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
      <tr>
        <td>a8</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
        <td>0.34257454</td>
      </tr>
    </tbody>
  </table>
</div>
    Login or Signup to reply.
  4. 0
    1. Make your first cell sticky by default using regular CSS-
    .sticky-column {
  position: sticky;
  left: 0;
}
    1. Make second cell also sticky but second cell’s position from left should be equal to first cell’s width so it would not override the first cell when scrolling. And you need to do this using jquery.

    Here is a working demo-

    let first_cell_width = $('table td:nth-child(1)').innerWidth() + 'px';
$('table th:nth-child(2), table td:nth-child(2)').css('left', first_cell_width);
    html, body {
  margin: 0
}
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
}

thead th {
  background-color: #fff222;
}

.sticky-column {
  position: sticky;
  left: 0;
  background-color: #fff222;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="sticky-column">Sticky Column 1</th>
      <th class="sticky-column">Sticky Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
      <th>Column 16</th>
      <th>Column 17</th>
      <th>Column 18</th>
      <th>Column 19</th>
      <th>Column 20</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="sticky-column">Sticky Cell 1</td>
      <td class="sticky-column">Sticky Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
      <td>Cell 13</td>
      <td>Cell 14</td>
      <td>Cell 15</td>
      <td>Cell 16</td>
      <td>Cell 17</td>
      <td>Cell 18</td>
      <td>Cell 19</td>
      <td>Cell 20</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search