Question

我想使用CSS创建滚动表，但是当我使用overflow-y : auto然后<td>中的<tr>在HTML中过载时，我遇到了一些麻烦，例如我放置了{{ 1}}和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>

CSS代码：

#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;
}

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

Answer 1

受到以下使用JQuery的链接的启发。

https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

$( document ).ready(function() {  
    $('#header_row').width(
    $('#header_row').width() - ($('#table_1').width() - $('#tbody').width()))
});

.fixed_header {
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
}

.fixed_header tr:nth-child(even) {
    background-color: #f2f2f2;
}

.fixed_header tr:hover {
    background-color: #ddd;
}

.fixed_header tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 100px;
}

.fixed_header thead tr {
    display: block;
    background-color: #4CAF50;
}

    .fixed_header thead {
        color: #fff;
    }

    .fixed_header thead th {
        border: 1px solid white
    }

    .fixed_header tbody td {
        border: 1px solid gray
    }

    .fixed_header th,
    .fixed_header td {
        padding: 5px;
        text-align: left;
        width: 200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div style="width: 100%">
    <table id="table_1" class="fixed_header">
        <thead>
            <tr id="header_row">
                <th>No</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody id="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>
    </table>
</div>
</html>

如何在<tr>中使<td>表响应

1 个答案: