HTML Table Fixed Header with Responsive Table Width
I have a table with no fixed width td
and width table
set to 100%. I want the table title to be corrected. I found many fixed width solutions like this one: JSFiddle
But it doesn't work for fluid width table and when you downsize viewport
it can't reach functionality.
Any way to get a fixed width response header?
My HTML looks like this:
<table class="delegations-table">
<thead>
<tr class="del-head">
<th>Région</th>
<th>Ville / Quartier</th>
<th>Lien</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
<td><a href="#">Délégation de Rabat</a></td>
<td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
</tr>
<tr>
<td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
<td><a href="#">Délégation de Sale</a></td>
<td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
</tr>
<tr>
<td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
<td><a href="#">Délégation de Temara</a></td>
<td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
</tr>
<tr>
<td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td>
<td><a href="#">Délégation de Touraga</a></td>
<td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td>
</tr>
</tbody>
</table>
My CSS looks like this:
.del-contain {
max-height: 260px;
width: 100%;
overflow: auto;
}
.delegations-table {
width: 94%;
margin: auto;
position: relative;
}
.delegations-table th {
color: #FFF;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
padding-left: 18px;
line-height: 2;
}
.delegations-table tr td a {
display:block;
height:100%;
width:100%;
}
.delegations-table tr.del-head {
background: #3b8d3c!important;
}
.delegations-table td {padding: 5px 0 10px 18px;}
.delegations-table tr:hover {background: #ededed;}
.delegations-table td a {color: #000;}
.delegations-table td a:hover {text-decoration: none;}
+3
source to share
2 answers
I managed to find a solution for this using CSS absolute positioning.
See the fiddle:
https://jsfiddle.net/u7vonqej/
HTML:
<div class="del-contain">
<table class="delegations-table">
<thead>
<tr class="del-head">
<th class="col1">Région</th>
<th class="col2">Ville / Quartier</th>
<th class="col3">Lien</th>
</tr>
</thead>
<tbody>
<br />
<tr>
<td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
</td>
<td class="col2"><a href="#">Délégation de Rabat</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
</td>
<td class="col2"><a href="#">Délégation de Sale</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
</td>
<td class="col2"><a href="#">Délégation de Temara</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
</td>
<td class="col2"><a href="#">Délégation de Touraga</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a>
</td>
<td class="col2"><a href="#">Délégation de Khemisset</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de du Grand Casablanca</a>
</td>
<td class="col2"><a href="#">Délégation de Mohammedia</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de du Grand Casablanca</a>
</td>
<td class="col2"><a href="#">Délégation de Mohammedia</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de du Grand Casablanca</a>
</td>
<td class="col2"><a href="#">Délégation de Mohammedia</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
<tr>
<td class="col1"><a href="#">Région de du Grand Casablanca</a>
</td>
<td class="col2"><a href="#">Délégation de Mohammedia</a>
</td>
<td class="col3"><a href="#"><img src="img/icons/del-icon.png" alt="" /></a>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.del-contain {
max-height: 260px;
width: 100%;
position: relative;
}
.delegations-table {
margin: auto;
overflow: auto;
max-height: 260px;
}
.delegations-table th {
color: #FFF;
font-family:'Open Sans', sans-serif;
font-size: 15px;
padding-left: 18px;
line-height: 2;
}
.delegations-table tr td a {
display:block;
height:100%;
width:100%;
}
.delegations-table tr.del-head {
background: #3b8d3c!important;
}
.delegations-table td {
padding: 5px 0 10px 18px;
}
.delegations-table tr:hover {
background: #ededed;
}
.delegations-table td a {
color: #000;
}
.delegations-table td a:hover {
text-decoration: none;
}
.delegations-table tr.no-bg {
background: 0 none;
}
/*--- Fixed Header Table ----*/
.delegations-table {
overflow-y:scroll;
display:block;
}
.delegations-table thead {
position:absolute;
top:1px;
left:0px;
right:0px;
}
.delegations-table tbody {
display:block;
margin-top: 20px;
}
.delegations-table tr {
width:100%;
display:block;
margin-top:-2px;
}
.delegations-table th {
position:absolute;
background: green;
}
.delegations-table td {
display:inline-block;
}
.col1 {
width:40%;
}
.col2 {
width:30%;
}
.col3 {
width:20%;
}
th.col1 {
left:0px;
right:80%;
}
th.col2 {
left:40%;
right:70%;
}
th.col3 {
left:70%;
right:50%;
}
@media screen and (max-width: 468px) {
table.delegations-table th {
height: 55px;
}
.delegations-table tbody {
margin-top: 40px;
}
}
@media screen and (max-width: 420px) {
.delegations-table .col2 {
padding-left: 15px;
}
.delegations-table .col3 {
padding-left: 10px;
}
}
a {
text-decoration: none;
}
0
source to share