代码之家 › 专栏 › 技术社区 › Nicke Manarin

将表格填充到可用空间,修复页眉和页脚

css html

Nicke Manarin · 技术社区 · 3 年前

我有一个部分的空间受到视口大小的限制(在我的实时页面中)。

布局包括以下内容:

表上内容
表>页眉+正文
内容如下表

现在,表的溢出部分有太多的项。我希望它是可滚动的,但我想将(1)+页眉固定在空格的顶部,将(3)固定在空格底部。

基本上,我需要表体来填充可用空间,保持上面的内容到顶部,下面的内容到底部。

我该怎么做?

* {
color: #ffffff
}

section 
{
  height: 200px;
}

section .table-wrapper {
  background-color: #202020;
  padding: 0;
}

section .row {
  margin-left: 0;
  margin-right: 0;
  height: 100%;
}

section .row>* {
  padding-left: 0;
  padding-right: 0;
}


/* Content above table */
.table-header {
  padding: .75rem .5rem;
}

.table-header .btn-container .add-btn {
  border: none;
  outline: none;
  background-color: #002088;
  border-radius: 4px;
  font-size: 14px;
  color: #EEEEEE;
  padding: .55rem .75rem;
}

.table-header .btn-container .add-btn span {
  margin-right: .5rem;
}


/* Table */

table {
  width: 100%;
  height: 100%;
}

table thead {
  background-color: #605079;
  padding: .5rem;
}

// Table header
table thead tr th {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .65px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 .5rem;
}

table thead th {
  border-bottom: 0px transparent;
}

table tbody tr {
  background-color: #505050;
  border-bottom-width: 1px;
  border-bottom-color: #3b4253;
}

table tbody tr td {
  font-size: 14px;
  color: var(--nav-text);
  font-weight: 400;
  line-height: 35px;
  padding: .5rem .5rem;
}

table tbody tr td:nth-of-type(1),
table thead tr th:nth-of-type(1) {
  padding-left: 30px;
}

select {
  color: #000000;
}

option {
  color: #000000;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<section>
  <div class="row">
    <div class="col-12 table-wrapper">
      <div class="d-flex justify-content-between align-items center table-header">
        <div class="filter-container">
          <label class="mx-2" for="filter">Search</label>
          <input class="mx-2 px-2" type="text" name="filter" placeholder="Search" />
        </div>

        <div class="btn-container px-2">
          <button type="button" class="add-btn">
            <span>Add
          </button>
        </div>
      </div>

      <div>
        <table role="grid">
          <thead>
            <tr role="row">
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Card</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
          </tbody>
        </table>

        <div class="d-flex justify-content-between p-2">
          <select class="m-2" style="width: auto" name="pageSize">
            <option value="10">10 items per page</option>
            <option value="20">20 items per page</option>
            <option value="30">30 items per page</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</section>

我通过使用CSS网格并设置正确的大小,将三个部分分隔成多个元素(页脚和表一起位于一个元素内),从而取得了进展。我现在只需要修一下表头。

section .table-wrapper {
  //...
  display: grid;
  grid-template-rows: fit-content(100%) auto fit-content(100%);
  grid-template-areas: "header" "main" "footer";
}

section .row {
  //...
  flex-wrap: nowrap;
}

* {
color: #ffffff
}

section 
{
  height: 200px;
}

section .table-wrapper {
  background-color: #202020;
  padding: 0;
  display: grid;
  grid-template-rows: fit-content(100%) auto fit-content(100%);
  grid-template-areas: "header" "main" "footer";
}

section .row {
  margin-left: 0;
  margin-right: 0;
  height: 100%;
  flex-wrap: nowrap;
}

section .row>* {
  padding-left: 0;
  padding-right: 0;
}

.scrollable {
  overflow: auto;
}

/* Content above table */
.table-header {
  padding: .75rem .5rem;
}

.table-header .btn-container .add-btn {
  border: none;
  outline: none;
  background-color: #002088;
  border-radius: 4px;
  font-size: 14px;
  color: #EEEEEE;
  padding: .55rem .75rem;
}

.table-header .btn-container .add-btn span {
  margin-right: .5rem;
}


/* Table */

table {
  width: 100%;
}

table thead {
  background-color: #605079;
  padding: .5rem;
}

// Table header
table thead tr th {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .65px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 .5rem;
}

table thead th {
  border-bottom: 0px transparent;
}

table tbody tr {
  background-color: #505050;
  border-bottom-width: 1px;
  border-bottom-color: #3b4253;
}

table tbody tr td {
  font-size: 14px;
  color: var(--nav-text);
  font-weight: 400;
  line-height: 35px;
  padding: .5rem .5rem;
}

table tbody tr td:nth-of-type(1),
table thead tr th:nth-of-type(1) {
  padding-left: 30px;
}

select {
  color: #000000;
}

option {
  color: #000000;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<section>
  <div class="row">
    <div class="col-12 table-wrapper">
      <div class="d-flex justify-content-between align-items center table-header">
        <div class="filter-container">
          <label class="mx-2" for="filter">Search</label>
          <input class="mx-2 px-2" type="text" name="filter" placeholder="Search" />
        </div>

        <div class="btn-container px-2">
          <button type="button" class="add-btn">
            <span>Add
          </button>
        </div>
      </div>

      <div class="scrollable">
        <table role="grid">
          <thead>
            <tr role="row">
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Card</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="d-flex justify-content-between p-2">
        <select class="m-2" style="width: auto" name="pageSize">
          <option value="10">10 items per page</option>
          <option value="20">20 items per page</option>
          <option value="30">30 items per page</option>
        </select>
      </div>
    </div>
  </div>
</section>

0 回复 | 直到 3 年前

JiÅí Vítek 3 年前

仅仅使用CSS和HTML是不够的。您需要javascript来实现您的目标。

更具体地说,应该使用“交叉点观察者”。使用它,您可以根据元素的可见性更改css或添加/删除元素中的类。例如,如果用户向下滚动到表格标题不再可见的点,则可以启动操作。或者当表头仅在50%或以下可见时。你明白了。

如果你从未使用过Intersection Observer,youtube可能是了解其工作原理的好开端。

另一种选择是手动计算所有内容。通过这种方式,您需要定义用户需要滚动多远(多少像素)才能触发动作。代码看起来像这样:

if(window.pageYOffset > 150) {
  //do some css change
}

A very basic example of this approach