Допомога у програмуванні, відповіді на питання / Джейкері / Дайте фіксовану ширину td, th якщо ширина йде більше, ніж екран, то прокрутіть - jquery, html, css, html-таблицю

Дайте фіксовану ширину до td, th, якщо ширина йде більше, ніж екран, тоді прокрутка - jquery, html, css, html-table

У мене є таблиця, в якій спочатку є 7Стовпці та 4 рядки. Я хочу фіксовану ширину до td і th. Завдання полягає в тому, що я додаю динамічно стовпці і рядки в таблиці, і я успішно в тому, що проблема, з якою я стикаюся, я не можу контролювати ширину td, th. Спочатку я даю 100% ширину таблиці, thead і tbody, і 15% ширину td, th.

Ось мій CSS:

    table {
width: 100%;
overflow:scroll;
}
thead {
width: 100%;
overflow:scroll;
}
tbody {
width: 100%;
overflow:scroll;
}
td{
width: 15%;
}
th{
width: 15%;
}

Ось мій стіл:

<section class="panel">
<div class="panel-body">
<div class="row">
<div class="table-responsive">
<table border="1px" class="fixed">
<thead>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Те, що я хочу, це дати 15% ширини td, th і якщо загальна ширина td, th хреста 100, то скроллер повинен прийти і ніяких змін на ширину th, td.

Будь ласка, допоможіть.

Відповіді:

1 для відповіді № 1

CSS

 table {
display: block;
overflow: scroll;
white-space: nowrap;
}
th div
{
width:150px;  //give here your approximate width
}

змінити html на

<section class="panel">
<div class="panel-body">
<div class="row">
<div class="table-responsive">
<table border="1px" class="fixed">
<thead>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
<th><div>Amount</div></th>
<th><div>Interest Rate</div></th>
</tr>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
<tr>
<th rowspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
<th colspan="2">Banking Details</th>
</tr>
<tr>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
<th>Amount</th>
<th>Interest Rate</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>