可滚动表格不同宽度的列

Question

>有人可以帮助我吗？ 我有一个表格，这是我的表格，我希望这个表格变得可滚动，我在谷歌上搜索，但该列在这里same width，我的专栏different width.

这是我的列更改大小，因为这是我的风格

.scrollTable thead {
display: block;}
.scrollTable tbody {
display: block;
height: 320px;
overflow: auto;}

这是我的HTML代码

<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>

Answer 1

使用width:100%和table-layout:fixed;，

.scrollTable thead {
display: block;
}
.scrollTable tbody tr {
table-layout:fixed;
display:table;
width:100%;
}
.scrollTable tbody {
display:block;
height:50px;
overflow:auto;
width:100%;
}

演示