Question

我正在使用Bootstrap 3.3.7制作表，在这种情况下，我使用的是Fixed标头，因为我提供了Position：static，但在IE中不起作用，请提出其他替代方法。

这是我的工作...

.tableStyle {
  overflow-y: auto;
  height: 400px;
  border: 1px solid #ccc;
}

.tableStyle thead th {
  position: sticky;
  top: 0;
}

.tableStyle thead th {
  background: #f1f1f1;
  color: #333;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Simple Sidebar - Start Bootstrap Template</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/simple-sidebar.css" rel="stylesheet">
  <link href="css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h2>Table</h2>
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
    <div class="table-responsive tableStyle">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
            <th>City</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
            <td>Pitt</td>
            <td>35</td>
            <td>New York</td>
            <td>USA</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Anna</td>
            <td>Pitt</td>
            <td>35</td>
            <td>New York</td>
            <td>USA</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Anna</td>
            <td>Pitt</td>
            <td>35</td>
            <td>New York</td>
            <td>USA</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- /#wrapper -->
  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/sidebar_menu.js"></script>
</body>

</html>

请告诉我如何在IE浏览器中处理它的任何替代方式。

Answer 1

.tableStyle thead th {
  position: sticky;
  top: 0;
}

您只需使用position:sticky而不是position: fixed。它将在chrome中工作，而Mozilla在IE-7中不工作。我只是在这里更正您的代码。

position：sticky在浏览器中不起作用

1 个答案: