У меня есть таблица на странице, которая использует Bootstrap 3 и значки материалов Google.
Создание складных рядов по нажатию last-child или tr развернуть значок.
Пожалуйста, проверьте код:
Мой код: JSFiddle link
@import url('https://fonts.googleapis.com/css?family=Roboto|Varela+Round');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.table-wrapper {
background: #fff;
/* padding: 20px 25px; */
box-shadow: 0 1px 1px rgba(148, 145, 145, 0.5)
}
.table-title {
background: #039BE5;
color: #fff;
padding: 5px 10px;
/* margin: -20px -25px 10px; */
}
.table-title h2 {
margin: 0px 0 0;
font-size: 16px;
line-height: 1.4;
}
.table-title .btn-group {
float: right;
}
.table-title .btn {
color: #fff;
float: right;
font-size: 13px;
border: none;
min-width: 50px;
border-radius: 2px;
border: none;
outline: none !important;
margin-left: 10px;
}
.table-title .btn i {
float: left;
font-size: 21px;
margin-right: 5px;
}
.table-title .btn span {
float: left;
margin-top: 2px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
padding: 5px 10px;
vertical-align: middle;
font-size: 11px;
}
table.table tr th:first-child {
width: 100px;
}
table.table tr th:last-child {
width: 60px;
}
table.table-striped tbody tr:nth-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table td:last-child i {
opacity: 0.9;
font-size: 22px;
margin: 0 5px;
color: #039be5;
}
table.table td a {
font-weight: bold;
color: #566787;
display: inline-block;
text-decoration: none;
outline: none !important;
}
table.table td a:hover {
color: #2196F3;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #F44336;
}
table.table td i {
font-size: 19px;
}
table.table .avatar {
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
.pagination {
float: right;
margin: 0 0 5px;
}
.pagination li a {
border: none;
font-size: 11px;
min-width: 30px;
min-height: 20px;
color: #999;
margin: 0 2px;
line-height: 25px;
border-radius: 2px !important;
text-align: center;
padding: 0 6px;
}
.pagination li a:hover {
color: #666;
}
.pagination li.active a, .pagination li.active a.page-link {
background: #03A9F4;
}
.pagination li.active a:hover {
background: #0397d6;
}
.pagination li.disabled i {
color: #ccc;
}
.pagination li i {
font-size: 16px;
padding-top: 6px
}
.hint-text {
float: left;
/* margin-top: 10px; */
font-size: 11px;
padding-left: 10px;
}
.tasks_container {
/* height: 530px; */
}
.schd_table {
margin-bottom: 10px;
}
.scheduleModal .modal-body {
padding-top: 0px;
}
.headerbtn.schduleView.activee,
.headerbtn.schduleViewTask.activee {
background-color: #039BE5 !important;
color: #ffffff !important;
}
.schd_table>tbody > tr.parent:hover{
background-color: transparent !important;
}
.schd_table tbody tr.collapse{
background-color: #f5f5f5;
}
.schd_table tbody tr.collapse td {
border: 1px solid #111;
}
.schd_table>tbody > tr.parent > td {
border-bottom: #fff;
}
.schd_table tbody {
height: 150px;
overflow-y: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover schd_table text-center" style="">
<thead>
<tr>
<!-- <th style="width: 40px !important;"></th> -->
<th class="text-center">Scheduled Date</th>
<th class="text-center">Name</th>
<th class="text-center">Interval</th>
<th class="text-center">Status</th>
<th class="text-center">Completed Date</th>
<th class="text-center">Paly/Pause</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody >
<tr class="parent">
<!-- <td>
<a href="#" class="view" ><i class="fa fa-angle-double-down fa-lg" data-toggle="tooltip" title="Play"></i></a>
</td> -->
<td>01-08-2018 11:00:30</td>
<td>RE-Test-101</td>
<td>Weekly</td>
<td>Completed</td>
<td>31-08-2018 12:00:00</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="Stop">stop</i></a>
</td>
<td >
<a href="#" class="view" data-toggle="collapse" data-target=".order1" ><i class="fa fa-angle-double-down fa-lg" data-toggle="tooltip" title="Play"></i></a>
</td>
</tr>
<tr class="collapse order1">
<td>01-08-2018 05:40:30</td>
<td>RE-Test-101</td>
<td>Week-1</td>
<td>Completed</td>
<td>08-08-2018 12:00:00</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="Pause">pause</i></a>
</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="In-Progress">play_for_work</i></a>
</td>
</tr>
<tr class="collapse order1">
<td>08-08-2018 05:40:30</td>
<td>RE-Test-101</td>
<td>Week-2</td>
<td>Completed</td>
<td>15-08-2018 12:00:00</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="Pause">pause</i></a>
</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="In-Progress">play_for_work</i></a>
</td>
</tr>
<tr class="collapse order1">
<td>29-08-2018 05:40:30</td>
<td>RE-Test-101</td>
<td>Week-5</td>
<td>Completed</td>
<td>31-08-2018 12:00:00</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="Pause">pause</i></a>
</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="In-Progress">play_for_work</i></a>
</td>
</tr>
<tr class="parent">
<!--<td>
<a href="#" class="view" ><i class="fa fa-angle-double-down fa-lg" data-toggle="tooltip" title="Play"></i></a>
</td> -->
<td>02-09-2018 05:40:30</td>
<td>RE-Test-102</td>
<td>Today</td>
<td>In-Progress</td>
<td>02-09-2018 12:00:00</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="Pause">pause</i></a>
</td>
<td>
<a href="#" class="view" ><i class="material-icons" data-toggle="tooltip" title="In-Progress">play_for_work</i></a>
</td>
</tr>
</tbody>
</table>
Настройка CSS, например: tbody: { height: 150px; overflow-y: auto}.
Но это не работает.
Как установить высоту и переполнение-у для тела .?