Фиксированный thead с прокруткой tbody

#css3 #html #вёрстка #css

Здравствуйте! Подскажите как сделать фиксированный thead с прокруткой tbody, желательно
без JavaScript. 

Есть метод с применением display: block; и указыванием фиксированной ширины к thead
и tbody. При таком подходе, если кол-во элементов не выходит за рамки DIV'a, то происходит
смещение, на ширину scrollbar'a.

Пример 
    

Ответы

Ответ 1

Вот это попробуй. Должно подойти.



html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width: 100%;
}
td + td {
  border-left: 1px solid #eee;
}
td,
th {
  border-bottom: 1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div {
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div {
  border: none;
}

**HTML**

  

    

      

        

          

            Table attribute name
            
Table attribute name
          
          

            Value
            
Value
          
          

            Description
            
Description
          
        
      
      

        

          
align
          
left, center, right
          
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment
of a table according to surrounding text
        
        

          
bgcolor
          
rgb(x,x,x), #xxxxxx, colorname
          
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background
color for a table
        
        

          
border
          
1,""
          
Specifies whether the table cells should have borders or not
        
        

          
cellpadding
          
pixels
          
Not supported in HTML5. Specifies the space between the cell wall and
the cell content
        
        

          
cellspacing
          
pixels
          
Not supported in HTML5. Specifies the space between cells
        
        

          
frame
          
void, above, below, hsides, lhs, rhs, vsides, box, border
          
Not supported in HTML5. Specifies which parts of the outside borders
that should be visible
        
        

          
rules
          
none, groups, rows, cols, all
          
Not supported in HTML5. Specifies which parts of the inside borders
that should be visible
        
        

          
summary
          
text
          
Not supported in HTML5. Specifies a summary of the content of a table
        
        

          
width
          
pixels, %
          
Not supported in HTML5. Specifies the width of a table
        
      
    
  



Ответ 2

Попробуй вот так



table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}

table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody { display: block; }

table.scroll thead tr {
width: 97%;
width: -webkit-calc(100% - 16px);
width:    -moz-calc(100% - 16px);
width:         calc(100% - 16px);
}

table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

table.scroll tbody td,
table.scroll thead th {
width: 19%;
float: left;
border-right: 1px solid black;
}

thead tr th { 
height: 30px;
line-height: 30px;
}

tbody { border-top: 2px solid black; }

tbody td:last-child, thead th:last-child {
border-right: none !important;
}


    

        
Head 1
        
Head 2
        
Head 3
        
Head 4
        
Head 5
    


    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Lorem ipsum
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5
    
    

        
Content 1
        
Content 2
        
Content 3
        
Content 4
        
Content 5