Как сделать прокручиваемую таблицу с фиксированным заголовком

Я пытаюсь сделать прокручиваемую таблицу с вертикальными и горизонтальными полосами прокрутки и с фиксированным заголовком.Как сделать прокручиваемую таблицу с фиксированным заголовком

Но когда я пытаюсь сделать заголовок в фиксированном положении, моя вертикальная полоса прокрутки становится скрытой и появляется только тогда, когда я прокручиваю крайний правый.

Аналогично, если я делаю полосы прокрутки видимыми, мой заголовок становится подвижным.

Просьба сообщить.

PFB мой код CSS.

.button-container{ 
text-align: center; 
} 
table { 
border-collapse: collapse; /* make simple 1px lines borders if border defined */ 
} 
tr { 
width: 100%;`} 
.outer-container { 
position: absolute; 
top:0; 
left: 0; 
right: 300px; 
bottom:40px; 


overflow: hidden; 
} 
.inner-container { 
width: 100%; 
height: 100%; 
position: relative; 

    overflow-y:hidden; 
} 
.header-table-container { 

float:left; 
width: 100%; 
} 

.header-table{ 
background: #0088CC; 
width=100%; 
cellpadding=0; 
cellspacing=0; 
} 

.body-table-container { 
float:left; 
height: 100%; 

} 

.body-table{ 
width=100%; 
cellpadding=0; 
cellspacing=0; 

height:500px; 
} 
.header-cell { 
background-color: yellow; 
text-align: left; 
height: 40px; 
} 
.body-cell { 
background-color: blue; 
text-align: left; 
} 
.headerCol { 
width: 160px; 
min-width: 160px; 
text-align: center; 
} 
.bodyCol { 
width: 160px; 
min-width: 160px; 
} 

.resultsCol { 
width: 250px; 
min-width: 250px; 
} 

.even { 
background: lightgrey; 
} 

.button-container{ 
text-align: center; 
} 

.results{ 
text-align: left; 
} 

#preprod-wrapper{ 

} 

#prod-wrapper{ 
height:500px; 
}

источник

2016-09-14 Harish Gupta

где находится ваш HTML? укажите рабочий пример (snippet/jsfiddler/something ...) – Dekel

Возможный дубликат http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div и http: //stackoverflow.com/questions/673153/html-table-with-fixed-headers – SchwiftyPython

Вы пробовали это?

table { 
border-collapse: collapse; 
overflow :scroll; 
}

источник

2016-09-14 20:31:26 ADarnal

его не слишком легко, но посмотрите здесь: здесь

https://fiddle.jshell.net/805s75hb/

Многие вещи были использованы, например, position и overflow.

Надеюсь, это может вам помочь. :)

источник

2016-09-14 20:37:03

Я использовал две таблицы для заголовка, чтобы сделать ее статической, чтобы она была исправлена. Посмотрите, если это может помочь вам :)

.wrap { 
    width: 352px; 
} 

.wrap table { 
    width: 300px; 
    table-layout: fixed; 
} 

table tr td { 
    padding: 5px; 
    border: 1px solid #eee; 
    width: 100px; 
    word-wrap: break-word; 
} 

table.head tr td { 
    background: #eee; 
} 

.inner_table { 
    height: 100px; 
    overflow-y: auto;

<!DOCTYPE html> 
<html> 
<head> 

</head> 
    <body> 
<div class="wrap"> 
    <table class="head"> 
     <tr> 
      <td>Head 1</td> 
      <td>Head 1</td> 
      <td>Head 1</td> 

     </tr> 
    </table> 
    <div class="inner_table"> 
     <table> 
     <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 
      <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 

     <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 
     <!-- Some more tr's --> 
    </table> 
    </div> 
</div> 
    </body> 
    </html>

источник

2016-09-14 20:39:01 C1234

У вас есть горизонтальная полоса прокрутки тоже в вашем примере? –

Да, у него есть опция горизонтальной и вертикальной прокрутки для таблицы inner_table. Таблица заголовков статична, даже если вы добавляете больше элементов td, она должна отображать все. – C1234

Проверьте их, добавив больше td элементов в Inner_table – C1234

Как сделать прокручиваемую таблицу с фиксированным заголовком

ответ

Смежные вопросы