anyone can help me ? i have a table here is my table , i want this table become scrollable, i was searching on google but the column is same width
here and here my column is different width
.
here is my column changing sizes because it's my style
.scrollTable thead {
display: block;}
.scrollTable tbody {
display: block;
height: 320px;
overflow: auto;}
and here is my HTML code
<table class="scrollTable" width="100%" >
<thead>
<tr id="notclickable">
<th width="3%" class="table-conf header-table">Order No. </th>
<th width="10%" class="table-conf header-table">Latest No</th>
<th width="20%" class="table-conf header-table">Parts Name</th>
<th width="7%" class="table-conf header-table">Qty</th>
<th width="8%" class="table-conf header-table">Unit Price</th>
<th width="10%" class="table-conf header-table">Amount</th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i < 15; $i++) :
?>
<tr>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
<td class="table-conf <?= ($i % 2 == 0 ) ? "even" : "odd" ; ?>"><br>ganteng</td>
</tr>
<?php endfor; ?>
<!-- //sek2 engkok lek bingung tak takok kon maneh iki takcobak plek karo ndk conto -->
</tbody>
</table>
Use width:100%
and table-layout:fixed;
like,
.scrollTable thead {
display: block;
}
.scrollTable tbody tr {
table-layout:fixed;
display:table;
width:100%;
}
.scrollTable tbody {
display:block;
height:50px;
overflow:auto;
width:100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.