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
You need to take the width of each cell from
tbody
to assign it to the title cells:$.each(selector, funcion)
: used to iterate through all elements returned by the selector$('#table1 thead th')
: returns the cells (th) of the table header (thehead)$(selector).width(valor)
: sets the width of the element$('#table1 tbody tr')
: get all rows of tbody.eq(0)
: select only the first row.find('td')
: returns all cells in the row.eq(index)
: selects the cell corresponding to the column being manipulated within the function (each).width()
: get the width of the cell and assign it to THSince tbody is displayed as a block, so that the rows occupy the full width of the table, they must be displayed as a table, while the header as a block, so that they do not affect the scroll bars.
Also, you have to loop through all the rows to assign the same width to each column.
Note: In CSS I removed the property
max-width
for TH and TD.