示例HTML

Question

我有一些问题让我的tbody可滚动

继承人我拥有的

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

滚动在tbody上。

继承人的结果

有关如何解决此问题的任何想法？

我的css的其余部分是标准引导程序，该类是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>

我希望我能帮到你！朱

Answer 2

您可以通过执行以下操作使其可滚动：

示例HTML

<table class="table table-striped">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Lorem</th>
      <th>Lorem</th>
      <th>Lorem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
  </tbody>

</table>

CSS

table {
    width: 100%;
}

thead, tbody, tr, td, th { 
  display: block; 
}

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
}

tbody {
    height: 120px;
    overflow-y: auto;
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

示例JsFiddle

希望这有帮助！

可滚动的html表

2 个答案:

CSS

HTML

示例HTML

CSS