Question

我有一个表UI。我想在不滚动的情况下修复表的位置。我怎样才能做到这一点？我的表X结束了Flow enter image description here

我的代码是 https://jsfiddle.net/Divyadevi_29/1of57ouh/

我用

  table {
  position: relative;
  padding-top: 20px;
}
table thead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
}
table thead tr {
  position: fixed;
  background: #fff;

}

它不起作用请帮帮我。

Answer 1

对每个表元素使用width（％）。试试这个jsfiddle

table {
    max-width: 100%;
    border: none;
    border-spacing: 0;
    text-align: left;
    overflow-x: hidden;
}
th, tr {
  width:10%;
}

Answer 2

尝试将表格包装在div中，并为其指定样式：

.wrapper {
  overflow-x:hidden;
  overflow-y:auto;
  height: 90px; /* Or whatever height you wish it to be */
  width: 500px; /* Or whatever width you wish it to be */
  padding-top: 20px;
}

.wrapper {
  overflow-x:hidden;
  overflow-y:auto;
  height: 90px;
  width: 500px;
  padding-top: 20px;
}
th, td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
  <table class="simple row-border hover">
    <thead>
      <tr>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Date</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Open</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Pending</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Inprogress</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Resolved</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Closed</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Email</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Phone</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Web</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Total</span>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>

正如您所看到的，这会隐藏overflow-x但在overflow-y上使用scroll。

修复了X中没有滚动的表格

2 个答案: