css 如何获得具有粘性头部和滚动体的圆形边框的表格

1mrurvl1 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(133)

我想要一个表的标题是粘性和身体应该是可滚动的，整个表应该有圆角。这是我的代码。

<div class="col-lg-4 table-container">
  <table>
    <thead>
      <tr>
        <th class="table_header">DEPARTMENTS</th>
      </tr>
    </thead>
    <tbody class="scrollable-body">
      <tr *ngFor="let department of departments">
        <td>{{ department }}</td>
      </tr>
    </tbody>
  </table>
</div>

和CSS

.table-container {
  max-height: 200px; /* Set a maximum height for the container */
  overflow-y: auto; /* Enable vertical scrolling */
}

.table_header {
 padding: 5%;
 color: blue;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
  color: #015468;
}

tbody.scrollable-body {
  display: block;
  max-height: inherit;
  overflow-y: auto;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

角不圆，tbody中的行直到滚动条才来，tbody和滚动条之间有这么多的间隙。
我需要对我的html和css做什么修改，才能得到我需要的表？救命啊！先谢谢你了！！！

css

来源：https://stackoverflow.com/questions/76575373/how-to-get-table-with-sticky-head-and-scroll-body-with-rounded-borders

2条答案

按热度按时间

rbpvctlc1#

<!DOCTYPE html>
<html>

<head>
  <style>
    .table-container {
      width: 400px;
      height: 300px;
      overflow: auto;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th,
    td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    
    thead th {
      position: sticky;
      top: 0;
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>

  <div class="table-container">
    <table>
      <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>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Add more table rows as needed -->
      </tbody>
    </table>
  </div>

</body>

</html>

试试这个

赞(0）回复(0）举报 2023-07-01

sdnqo3pr2#

您也可以尝试专门针对tbody执行此操作，但这种方式会使处理tr和td的操作更加复杂。在本例中，您设置了display: block;以使tbody可滚动，但它破坏了表结构，这不是最好的事情，但如果您有一个简单的表，它应该可以工作。jsfiddle sandbox link

table {
  width: 100%;
  border-collapse: collapse;
  border: solid black 1px;
  border-radius: 6px;
  table-layout: fixed;
}

td,
th {
  padding: 8px;
  border-left: solid #ccc 1px;
  border-top: solid #ccc 1px;
}

th {
  border-top: none;
}

td:first-child,
th:first-child {
  border-left: none;
}

.table_header {
  padding: 5%;
  color: blue;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
  color: #015468;
}

tbody.scrollable-body {
  display: block;
  overflow-y: scroll;
  height: 100px;
}

table td {
  width: 1%; /*hack for width*/
}

.table-container {
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
}

<div class="col-lg-4 table-container">
  <table>
    <thead>
      <tr>
        <th class="table_header">DEPARTMENTS</th>
      </tr>
    </thead>
    <tbody class="scrollable-body">
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何获得具有粘性头部和滚动体的圆形边框的表格

2条答案

相关问题

热门标签

最新问答