como hago para que mi <thead></thead>
mi <tbody></tbody>
se ajuste a todo la tabla
Bueno el <thead></thead>
mi tabla es statico y el <tbody></tbody>
tiene un scroll para poder ver no . pero como pueden ver no se acopla al ancho de mi tabla sinos sigue a existiendo campos vacios
alguna sugerencia para que mi <tbody></tbody>
y mi <thead></thead>
se auto ajuste a mi width
de mi table
tengo el siguiente ejemplo de mi table
$('table').on('scroll', function() {
$("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});
html {
font-family: verdana;
font-size: 10pt;
line-height: 25px;
}
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #121F3D;
color:white;
}
thead,
tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td,
th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
border-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="table-responsive">
<table class="table" id="table1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mantenimiento De Vehiculos Y Ayuda A De Cables Sss</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
</tr>
</tbody>
</table>
</div>
</div>
Bueno como en mi ejemplo muestro mi table. sus columnas no se ajustan en toda la tabla sinos se limitan
Me gustaria que la las columnas ocupen todo su width
de mi table pero sin perder el <thead></thead/>
estatico .
alguna solución gracias