Question

我需要为我的bootstrap表修复表头，任何人都有完美的解决方案请指导我，

注意：它应该是一个响应表。

Answer 1

以下代码段将执行以下操作： -

固定表格标题
填充100％的页面（垂直和水平）
调整浏览器大小时的响应。

也可在此代码中找到： - 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>

如何在bootstrap中创建固定表头？

1 个答案: