How do I make my <thead></thead>
mi <tbody></tbody>
fit the entire table?
Well <thead></thead>
my table is static and it<tbody></tbody>
has a scroll to be able to see no. but as you can see it does not fit the width of my table otherwise there are still empty fields
any suggestions for my <tbody></tbody>
and my <thead></thead>
to auto adjust to my width
from my table
I have the following example of my 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>
Well as in my example I show my table. its columns do not fit in the entire table but are limited
I would like the columns to occupy all width
of my table but without losing the <thead></thead/>
static.
any solution thanks