-3

I need to fixed table header for my bootstrap table, any one have perfect solution please guide me,

Note: It should be a Responsive table.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sathishkumar
  • 419
  • 2
  • 8
  • 20

1 Answers1

1

The following snippet will do the following: -

  • Fixed tables headers
  • Fills 100% of page (vertically and horizontally)
  • Is responsive when browser is resized.

Also available at this codepen: - http://codepen.io/bobmarksie/pen/VadxoK

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  />

  <style type="text/css">
    body {
      padding-top: 50px;
    }

    .navbar {
      height: 50px;
      padding: 0 15px;
      width: 100%;
      position: fixed;
      top: 0;
      z-index: 1;
    }
    .navbar a {
      color: white;
      line-height: 3em;
    }

    .table-area {
      position: relative;
      z-index: 0;
      margin-top: 50px;
    }

    table.responsive-table {
      display: table;
      /* required for table-layout to be used (not normally necessary; included for completeness) */
      table-layout: fixed;
      /* this keeps your columns with fixed with exactly the right width */
      width: 100%;
      /* table must have width set for fixed layout to work as expected */
      height: 100%;
    }
    table.responsive-table thead {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      width: 100%;
      height: 50px;
      line-height: 3em;
      background: #eee;
      table-layout: fixed;
      display: table;
    }
    table.responsive-table th {
      background: #eee;
    }
    table.responsive-table td {
      line-height: 2em;
    }
    table.responsive-table tr > td, table.responsive-table th {
      text-align: left;
    }

  </style>

</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <a href="">Insert Brand / Logo</a>
  </nav>
  <section class="content-area">
    <div class="table-area">
      <table class="responsive-table table">
        <thead>
          <tr>
            <th><input type="checkbox"> First name</th>
            <th>Last name</th>
            <th>Points</th>
            <th>Content</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox">  Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
            <td><input type="checkbox">  Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
          </tr>
          <tr>
            <td><input type="checkbox">  Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
            <td><input type="checkbox">  Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
          </tr>
          <tr>
            <td><input type="checkbox">  Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
            <td><input type="checkbox">  Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
          </tr>
          <tr>
            <td><input type="checkbox">  Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
            <td><input type="checkbox">  Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
          </tr>

        </tbody>
      </table>
    </div>
  </section>
</body>
</html>
bobmarksie
  • 3,282
  • 1
  • 41
  • 54
  • Not sure if "Is responsive when browser is resized" is true, as us use a fixed offset for the table header height and tbody margin. So long table header cells might break this. – SumNeuron Jun 24 '18 at 20:03