Как сделать таблицу <td>отзывчивой в <tr> - PullRequest
Новая
       1

Как сделать таблицу <td>отзывчивой в <tr>

0 голосов
/ 02 апреля 2020

Я хочу создать таблицу прокрутки, используя css, но у меня есть некоторые проблемы, когда я использую overflow-y : auto, а затем <td> перегрузка в <tr>, например код, который я поставил 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>

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: Мой код

1 Ответ

1 голос
/ 02 апреля 2020

Вдохновлен следующей ссылкой с использованием JQuery.

https://medium.com/@vembarrajan / html - css -tricks-scroll-able-table-body-tbody-d23182ae0fb * ​​1017 *

$( 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...