HTML-стол Фиксированный верхний колонтитул с адаптивной шириной стола

Question

У меня есть таблица без фиксированной ширины td и table ширина установлена ​​на 100%. Я хочу, чтобы заголовок таблицы был исправлен. Я нашел множество решений для фиксированной ширины, как этот: JSFiddle

Но он не работает для таблицы ширины жидкости, и когда вы уменьшаете размер viewport, он не может достичь функциональности.

Любой способ получить ответную фиксированную ширину заголовка?

Мой HTML выглядит так:

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

Мой CSS выглядит следующим образом:

.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;} 

Answer 1

Я был в состоянии придумать решение для этого с помощью CSS абсолютного позиционирования.

См скрипку:

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

Answer 2

Не уверен, что если вы хотите, чтобы решить эту проблему с вашим собственным настраиваемым реализации, но плагин DataTables закрепил который может стоить проверить.

http://datatables.net/