Question

我正在设计一个网站，并且有一个包含许多数据行的表。所以我想让表可滚动但修复表头，这样用户就知道数据属于什么。

现在这个滚动功能运行良好，但表已折叠。我无法将表拉伸到100％的容器（就像修改前一样）。

唯一有效的方法是将表格及其列的宽度设置为绝对值（以像素为单位）。众所周知，这对于移动设计来说是非常不可取的，所以如果桌子的相对价值再次正常，那就太棒了......

这是我的代码：

＆＃13;

$width:1200px;
 .fixed_headers {
  width: $width;
  table-layout: fixed;
  border-collapse: collapse;
  td: nth-child(1), th: nth-child(1) {
    min-width: calc(0.16 * # {
      $width
    }
    );
  }
  td:nth-child(2),
  th:nth-child(2) {
    min-width: calc(0.42 * # {
      $width
    }
    );
  }
  td:nth-child(3),
  th:nth-child(3) {
    min-width: calc(0.42 * # {
      $width
    }
    );
  }
  thead {
    tr {
      display: block;
      position: relative;
    }
  }
  tbody {
    display: block;
    overflow-y: scroll;
    width: calc(# {
      $width
    }
    - 2px); // border left and right 1px
    height:30vh;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table-responsive">
  <table class="table table-condensed table-hover table-striped table-bordered fixed-headers">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

如您所见，我已将表格的宽度设置为1200px，但我想在100%处将其设置为响应。你知道如何解决这个问题吗？

问题示例：http://codepen.io/anon/pen/WGrzaR?editors=1100

Answer 1

将表格放入div并将该div设置为所需的宽度，例如100vw。
然后将表格设置为100％。

Answer 2

代码示例：

<Style>

table {
    width: 100vw;
    max-height: 300px;
    background-color: yellow;
    overflow: scroll;
}

th {
    background-color: blue;
    height: 40px;
    width: 30%;
}
td {
    height: 40px;
    background-color: red;
    width: 100px;
}

</Style>

表只接受绝对（像素）值而不接受相对（百分比）值

2 个答案: