Ya no necesitas buscar más por todo internet porque estás al sitio correcto, poseemos la solución que deseas sin problema.
Solución:
Si tiene un encabezado en las columnas de su tabla y no desea desplazarse por esos encabezados, esta solución podría ayudarlo:
Esta solución necesita thead y tbody etiquetas dentro table elemento.
table.tableSection
display: table;
width: 100%;
table.tableSection thead, table.tableSection tbody
float: left;
width: 100%;
table.tableSection tbody
overflow: auto;
height: 150px;
table.tableSection tr
width: 100%;
display: table;
text-align: left;
table.tableSection th, table.tableSection td
width: 33%;
violín de trabajo
Con comentarios
Nota: si está seguro de que la barra de desplazamiento vertical siempre está presente, puede usar la propiedad css3 calc para hacer que las celdas principales se alineen con las celdas del cuerpo.
table.tableSection thead
padding-right:18px; /* 18px is approx. value of width of scroll bar */
width: calc(100% - 18px);
Puede hacer lo mismo detectando la presencia de la barra de desplazamiento usando javascript y aplicando los estilos anteriores.
En lugar de asumir como columnas de ancho fijo.
CSS
table.tableSection
display: table;
width: 100%;
table.tableSection thead,
table.tableSection tbody
width: 100%;
table.tableSection thead
overflow-y: scroll;
display: table;
table-layout: fixed;
width: calc(100% - 16px); /* assuming scrollbar width as 16px */
table.tableSection tbody
overflow: auto;
height: 150px;
display: block;
table.tableSection tr
width: 100%;
text-align: left;
display: table;
table-layout: fixed;
violín de trabajo
Esta es una técnica que he usado en varias ocasiones. Originalmente se basa en este violín con una serie de modificaciones. También es fluido y los anchos de columna se pueden arreglar agregando un estilo de ancho al
/* this is for the main container of the table, also sets the height of the fixed header row */
.headercontainer
position: relative;
border: 1px solid #222;
padding-top: 37px;
background: #000;
/* this is for the data area that is scrollable */
.tablecontainer
overflow-y: auto;
height: 200px;
background: #fff;
/* remove default cell borders and ensures table width 100% of its container*/
.tablecontainer table
border-spacing: 0;
width:100%;
/* add a thin border to the left of cells, but not the first */
.tablecontainer td + td
border-left:1px solid #eee;
/* cell padding and bottom border */
.tablecontainer td, th
border-bottom:1px solid #eee;
padding: 10px;
/* make the default header height 0 and make text invisible */
.tablecontainer th
height: 0px;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
visibility: hidden;
white-space: nowrap;
/* reposition the divs in the header cells and place in the blank area of the headercontainer */
.tablecontainer th div
visibility: visible;
position: absolute;
background: #000;
color: #fff;
padding: 9px 10px;
top: 0;
margin-left: -10px;
line-height: normal;
border-left: 1px solid #222;
/* prevent the left border from above appearing in first div header */
th:first-child div
border: none;
/* alternate colors for rows */
.tablecontainer tbody tr:nth-child(even)
background-color: #ddd;
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
También como un JSFiddle
Comentarios y puntuaciones
Al final de todo puedes encontrar las explicaciones de otros desarrolladores, tú además puedes mostrar el tuyo si te apetece.