Html 如何制作<；td>；表中的响应<；tr>；

我想用css制作一个滚动表，但我遇到了一些麻烦，当我使用

overflow-y:auto

时，

中的

过载，例如，我在这里放置了

HTML

和

css

代码：

HTML代码：

<table id="check" class="table table-fixed">
<thead>
    <tr>
        <th>No</th>
        <th>Name</th>
        <th>Gender</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
</tbody>

---

我还将代码编辑器的链接放在codepen中：

受以下使用JQuery链接的启发

$（文档）.ready（函数（）{
$（“#标题_行”）。宽度(
$（“#页眉_行”）.width（）-（$（“#表格_1”）.width（）-$（“#正文”）.width（））
});
。修复了\u标题{
宽度：400px；
表布局：固定；
边界塌陷：塌陷；
保证金：0自动；
}
.fixed_头tr:n子级（偶数）{
背景色：#F2F2；
}
.固定标题tr：悬停{
背景色：#ddd；
}
.固定式头部车身{
显示：块；
宽度：100%；
溢出：自动；
高度：100px；
}
.fixed_header thead tr{
显示：块；
背景色：#4CAF50；
}
.fixed_header thead{
颜色：#fff；
}
.固定标题thead th{
边框：1px纯白
}
.固定头t车身总成{
边框：1px纯色灰色
}
.固定头数，
.固定头td{
填充物：5px；
文本对齐：左对齐；
宽度：200px；
}

不
名称
性别
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性
1.
Jax
男性

#check {
 width: 70%;
 margin-top : 5%;
 margin-left: 45%;
 border-collapse: collapse;
 width: 100%;
}

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

#check tr:nth-child(even){background-color: #f2f2f2;}
#check tr:hover {background-color: #ddd;}

#check th {
 padding-top: 12px;
 padding-bottom: 12px;
 text-align: left;
 background-color: #4CAF50;
 color: white;
}

.table-fixed tbody {
 height: 250px;
 overflow-y: auto;
 margin-top: 1px;
 table-layout: fixed;
 display: block;
 overflow: auto;
}
.table-fixed thead tr {
 display: block;
}