Ayuda en la programación, respuestas a preguntas / Jquery / Dé un ancho fijo a td, th si el ancho va más allá de la pantalla, luego desplácese - jquery, html, css, html-table

Dé un ancho fijo a td, th si el ancho va más allá de la pantalla, luego desplácese - jquery, html, css, html-table

Tengo una tabla en la que inicialmente hay 7Columnas y 4 filas. Quiero ancho fijo a td y th. El desafío es que estoy agregando dinámicamente columnas y filas en la tabla y tengo éxito porque el problema que enfrento es que no puedo controlar el ancho de td, th. Inicialmente estoy dando 100% de ancho a table, thead y tbody, y 15% de ancho a td, th.

Aquí está mi CSS:

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

Aquí está mi mesa:

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

Lo que quiero es dar un ancho del 15% a td, th y si el ancho total de td, th cruza 100, entonces debería aparecer un desplazamiento y no cambiar el ancho de th, td.

Por favor ayuda.

Respuestas

1 para la respuesta № 1

CSS

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

cambiar html a

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