html - 可滚动的 html 表格

Question

我在使我的 tbody 可滚动时遇到了一些问题

这是我的

.scroll {
overflow: auto;
height: 200px;
display: block;
}

卷轴在tbody上。

这是结果

关于如何解决这个问题有什么想法吗？

我的 css 的其余部分是标准的 Bootstrap ，类是 table table-hover

谢谢 山姆

Answer 1

我设计了一个轻巧实用的 HTML 表格模板。例如，我使用了里约热内卢奥运会的主题 :) 尽情享受吧!

CSS

<style>
  #grid {
    width: 100%; /* <-- Grid width */
    background-color: yellow; /* Grid background color */
    border: 2px solid lightgray; /* Grid external border color */
    overflow-y: hidden; /* <-- Do not change */
    overflow-x: auto; /* <-- Do not change */
    text-align: left; /* <-- Grid default text alignment */
    font-size: 18px; /* <-- Default text size */
  }
  #grid table {
    width: 100%; /* <-- Do not change */
    border-collapse: collapse; /* <-- Do not change */
  }
  #grid thead tr {
    background-color: yellowgreen; /* <-- Header background color */
    color: white; /* <-- Header font color */
    height: 40px; /* <-- Header height */
  }
  #grid thead, #grid tbody {
    display: block; /* <-- Do not change */
  }
  #grid tbody {
    height: 100px; /* <-- Modify here for grid height */
    overflow-x: hidden; /* <-- Do not change */
    overflow-y: auto; /* <-- Do not change */
    color: black; /* <-- Body font color */
  }
  #grid td, #grid th {
    padding: 8px; /* <-- Grid internal cell padding */
    border: 1px solid lightgray; /* <-- Grid internal border color */
    min-width: 100px; /* <-- Column default size except last one. */
  }
  #grid td:last-child, #grid th:last-child {
    width: 100%; /* <-- Do not change */
  }
  #grid tbody tr td:hover {
    background-color: lightskyblue; /* <-- Cell default color on MouseOver event */
    color: white; /* <-- Cell font color on MouseOver event */
  }
  #grid tbody tr:hover {
    background-color: steelblue; /* <-- Row default color on MouseOver event */
    color: white; /* Row font color on MouseOver event */
  }
</style>

HTML

<div id="grid">
<table>
  <thead>
  <tr>
    <th>Name</td>
    <th>Last name</td>      
    <th>Age</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  </tbody>
</table>
</div>

希望对你有所帮助!
朱利亚诺