Прокручиваемый стол разной ширины столбца - PullRequest
Новая
       24

Прокручиваемый стол разной ширины столбца

0 голосов
/ 13 сентября 2018

кто-нибудь может мне помочь? у меня есть таблица вот моя таблица , я хочу, чтобы эта таблица стала прокручиваемой, я искал в Google, но столбец 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>

1 Ответ

0 голосов
/ 13 сентября 2018

Используйте 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%;
}

Демо

...