Twitter Загрузочный стол с фиксированным заголовком и первым столбцом вместе

Question

У меня есть следующая таблица с фиксированным первым столбцом.

JSFiddle:

https://jsfiddle.net/f7v2xaph/

<iframe width="100%" height="300" src="//jsfiddle.net/f7v2xaph/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Я хотел бы спросить, как обновить код, чтобы получить фиксированный заголовок тоже?

Я попытался этим решением

Scrollable table with fixed header in bootstrap

Но без удачи, чтобы работа с фиксированной первой колонкой.

Большое спасибо за любой совет.

Answer 1

Избегайте использования JavaScript, когда вы можете сделать это в CSS:

.table-responsive thead { 
    position: fixed; 
} 

Кроме того, вам нужно будет сделать небольшой трюк, если вы не хотите, чтобы ваша голова к overhide ваш TBODY:

.table-responsive { 
    margin-top: 40px; // height of your thead tr 
} 

.table-responsive thead { 
    position: fixed; 
    top: 0; 
} 

Вторая проблема, связанная с фиксацией вашего ада, заключается в том, что ширина ячеек вашего ящика не будет соответствовать ширине ячеек вашего тела ... вам нужно будет исправить это с помощью свойства width, ячейки на ячейку.