HTML table with fixed header, vertical and horizontal scroll

siva nathan

Hi all,

I need a HTML responsive table with vertical scroll and horizontal scroll with first column fixed

can any one share the idea for this

horizontal scroll with name column fixed

verical scroll with table header fixed

Name	config1	config2	config3
admin	yes	no	yes
student	no	yes	no

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Script:
$(document).ready(function() {
    $('#example').DataTable( {
        "scrollY": 200,
        "scrollX": true
    } );
} );

"https://code.jquery.com/jquery-3.5.1.js">
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">

"stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
CSS:
div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
Table:
<table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Nameth>
                <th>config1th>
                <th>config2th>
                <th>config3th>

            tr>
        thead>
        <tbody>
            <tr>
                <td>admintd>
                <td>yestd>
                <td>notd>
                <td>yestd>
            tr>
            <tr>
                <td>studenttd>
                <td>notd>
                <td>yestd>
                <td>notd>
            tr>

        tbody>
    table>
0
Mageshwaran R5y ago
Hi Siva,
HTML:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>


<div class="container">
  <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>
            Fixed Header Scrolling Table
          h4>
        div>
        <table class="table table-fixed">
          <thead>
            <tr>
              <th class="col-xs-2">#th><th class="col-xs-8">Nameth><th class="col-xs-2">Pointsth>
            tr>
          thead>
          <tbody>
            <tr>
              <td class="col-xs-2">1td><td class="col-xs-8">Mike Adamstd><td class="col-xs-2">23td>
            tr>
            <tr>
              <td class="col-xs-2">2td><td class="col-xs-8">Holly Galivantd><td class="col-xs-2">44td>
            tr>
            <tr>
              <td class="col-xs-2">3td><td class="col-xs-8">Mary Sheatd><td class="col-xs-2">86td>
            tr>
            <tr>
              <td class="col-xs-2">4td><td class="col-xs-8">Jim Adamstd><td>23td>
            tr>
            <tr>
              <td class="col-xs-2">5td><td class="col-xs-8">Henry Galivantd><td class="col-xs-2">44td>
            tr>
            <tr>
              <td class="col-xs-2">6td><td class="col-xs-8">Bob Sheatd><td class="col-xs-2">26td>
            tr>
            <tr>
              <td class="col-xs-2">7td><td class="col-xs-8">Andy Parkstd><td class="col-xs-2">56td>
            tr>
            <tr>
              <td class="col-xs-2">8td><td class="col-xs-8">Bob Skellytd><td class="col-xs-2">96td>
            tr>
            <tr>
              <td class="col-xs-2">9td><td class="col-xs-8">William Defoetd><td class="col-xs-2">13td>
            tr>
            <tr>
              <td class="col-xs-2">10td><td class="col-xs-8">Will Tripptd><td class="col-xs-2">16td>
            tr>
            <tr>
              <td class="col-xs-2">11td><td class="col-xs-8">Bill Championtd><td class="col-xs-2">44td>
            tr>
            <tr>
              <td class="col-xs-2">12td><td class="col-xs-8">Lastly Janetd><td class="col-xs-2">6td>
            tr>
          tbody>
        table>
      div>
  div>
div>
CSS:
.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}
0
Sachin Singh5y ago
In html , the scroll generates when you fix height and length respectively without bootstrap . In bootstrap the same applies with screen size .use bootstrap responsive table.
class="table table-responsive table-bordered">
  class="thead-dark">

      "col">#
      "col">First
      "col">Last
      "col">Handle




      "row">1
      Mark
      Otto
      @mdo
0