Я создаю таблицу с помощью этого плагина jQuery FixedHeaderTable .
Насколько я узнал из вопросов других пользователей, ширина таблицы соответствует ширине ее контейнера, но не можетавтоматически меняются (я уже пробовал).Я хочу, чтобы размер моей таблицы был 1302px, если размер окна 1366px или больше, и 100% - 48px, если он меньше этого.
До сих пор я пытался изменить размер контейнера моей таблицы следующим образом (таблица изменяет размеры, как яхотел), но может быть проблема с методом destroy.Как вы можете видеть, мой заголовок таблицы удваивается, когда я изменяю размер окна.Однако, если бы я не вызвал этот destroy метод и не перестроил, размер моей таблицы не изменился бы вообще, а следовал бы только начальной ширине окна, когда она только что была построена.
var resizeTimer;
var wrapperWidth;
$(window).on('resize', function(e) {
$('.fixed-table').fixedHeaderTable('destroy');
if ($(window).width() > 1366) {
$('.fixed-table-wrapper').css({"width":"1302px"});
}
else {
windowWidth = $(window).width() - 48;
$('.fixed-table-wrapper').css({"width": windowWidth + "px"});
}
$('.fixed-table').fixedHeaderTable({
footer: false,
fixedColumn: true,
height: '420px',
altClass: 'alternate-row',
autoShow: false
});
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
$('.fixed-table').fixedHeaderTable('show');
}, 250);
});
.fixed-table-wrapper {
width: 1302px;
overflow-x: scroll;
}
.fixed-table thead {
border-bottom: solid 2px #d1d1d1;
font-weight: 700 !important;
}
table.fixed-table th,
table.fixed-table td {
border: none;
font-size: 13px;
padding: 11px 12px;
vertical-align: middle;
}
.sortable {
position: relative;
}
.sortable::after {
font-family: "Font Awesome 5 Free";
color: #aaa;
content: '\f0dc';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.alternate-row {
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link type="text/css" href="https://rawgit.com/markmalek/Fixed-Header-Table/master/css/defaultTheme.css" rel="stylesheet">
<div class="fixed-table-wrapper">
<table class="fixed-table">
<thead>
<tr>
<th></th>
<th>Edit</th>
<th class="sortable">Request No.</th>
<th class="sortable">Employee ID</th>
<th class="sortable">Employee Name</th>
<th class="sortable">For Family</th>
<th class="sortable">Request Date</th>
<th>Editable Example</th>
<th>Total Amount</th>
<th>Details</th>
<th>Approval History</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>I Putu Yudi Haryasa</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Daniel Giovanni Gunawan</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Muhammad Nadzeri Munawar</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Glenn Kristanto</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Hendryanto Fudiko</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>I Putu Yudi Haryasa</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Daniel Widjaja</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Faris Kurniawan</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Romy Kusuma</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
<tr>
<td></td>
<td><i class="fas fa-pencil-alt"></i></td>
<td>REI/TRA/04/005</td>
<td>EMP004</td>
<td>Muhammad Nadzeri Munawar</td>
<td><i class="fas fa-minus yes-no"></i></td>
<td>04 May 2018</td>
<td></td>
<td>300,000.00</td>
<td>See details</td>
<td>See approvals</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/markmalek/Fixed-Header-Table/master/jquery.fixedheadertable.min.js"></script>