獲取表格標題和正文以匹配列寬

我創建了以下

表結構如下：

<div>
    <table class="is-table-with-scrolling-body">
       <thead>
          <tr>
             <th>Created By</th>
             <th>Subject</th>
             <th>Date Created</th>
            <th>File</th>
            <th></th>
          </tr>
       </thead>
       <tbody>
          <tr data-index="0">
             <td><span>Person Name 1</span></td>
             <td>First upload of...</td>
             <td>3/21/2022 7:18 PM</td>
             <td>0</td>
            <td></td>
          </tr>
          ...
       </tbody>
    </table>
</div>

使正文可滾動的 CSS（從我的研究中在線找到）是：

table {
  &.is-table-with-scrolling-body {
    width: 100%;
    height: 400px;

    thead,
    tbody,
    tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      > th {
        border: solid 1px red;
      }
    }

    tbody {
      display: block;
      overflow: auto;
      table-layout: fixed;
      max-height: 190px;;
      > tr {
        > td {
          border: solid 1px red;
        }
      }
    }
  }
}

uj5u.com熱心網友回復：

我將您的 SCSS 轉換為 CSS

您需要在保留功能的同時隱藏右邊緣滾動條，這意味著使用

::webkit-scrollbar

或類似您的需要

table.is-table-with-scrolling-body thead::-webkit-scrollbar,
table.is-table-with-scrolling-body tbody::-webkit-scrollbar {
  display: none;
}

div {
  height: 200px;
  overflow: hidden;
}

table.is-table-with-scrolling-body {
  width: 100%;
  height: auto;
}

table.is-table-with-scrolling-body thead,
table.is-table-with-scrolling-body tbody {
  overflow: auto;
}

table.is-table-with-scrolling-body thead::-webkit-scrollbar,
table.is-table-with-scrolling-body tbody::-webkit-scrollbar {
  display: none;
}

table.is-table-with-scrolling-body thead tr,
table.is-table-with-scrolling-body tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table.is-table-with-scrolling-body thead tr>th,
table.is-table-with-scrolling-body tbody tr>th {
  border: solid 1px red;
}

table.is-table-with-scrolling-body tbody {
  display: block;
  table-layout: fixed;
  max-height: 200px;
}

table.is-table-with-scrolling-body tbody>tr>td {
  border: solid 1px red;
}

<div>
  <table class="is-table-with-scrolling-body">
    <thead>
      <tr>
        <th>Created By</th>
        <th>Subject</th>
        <th>Date Created</th>
        <th>File</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
    </tbody>
  </table>

</div>

標籤：html css

上一篇：向div添加邊距會將其推離螢屏

下一篇：如何在CSS上制作影像邊框/陰影效果