tbody - tfoot html
<table><tbody> ¿desplazable? (7)
Aquí está la solución,
El encabezado fijo de tabla y el contenido dentro de la tabla pueden ser desplazables.
Parte HTML
<div class="table_wrapper">
<div class="header">
<div class="head1">Left</div>
<div class="head2">Center</div>
<div class="head3">Right Column</div>
</div>
<div class="tbody">
<table>
<tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
<tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
<tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
</tbody></table>
</div>
</div>
Pieza CSS
.table_wrapper {background:tomato;border:1px double olive;float:left;}
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
.td3{border-right-width:0;}
.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
.header div{padding:1px 5px;float:left;border-right:1px solid orange;}
.header .head3{float:none;border-right-width:0;}
.head3 span{padding-left:5px;}
.td1{width:100px;}
.td2{width:140px;}
.header .head1{width:100px;}
.header .head2{width:140px;}
Me gustaría tener una mesa con una barra de desplazamiento a la derecha.
Quiero lograr esto sin ningún complemento (jQuery) solo con css.
Se supone que el encabezado de la tabla permanece fijo.
¿Qué debo hacer para que esto funcione?
Este simple CSS debería hacer el truco:
table.table-scroll-body {
position: relative;
height: 200px; }
table.table-scroll-body tbody {
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto; }
Y el HTML si lo necesitas ..
<table class="table-scroll-body">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
</tbody>
Esto funciona, lo saqué directamente de mi sitio web:
#news_box {
overflow: scroll;
overflow-x: hidden;
}
EDITAR: También acabo de encontrar esto con un buen ejemplo:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Aquí hay otro buen artículo sobre esto:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
Ha asumido una tarea que, si tiene éxito, lo convertirá en un héroe. Intenté esto y lo sencillo: posicionar: fijo; el <thead> - es imposible. Tuve que copiar todo el <thead> en un nuevo objeto. Pero cuando haces eso, el espaciado horizontal de los <th> elementos desaparece, por lo que los títulos ya no se alinean con los <td> s. Terminé haciendo algo como esto:
En primer lugar, abandone ie6 y ie7. No hay esperanza para esos tipos.
Haga dos copias de la tabla, una donde el cuerpo es invisible y el <thead> es visible, y el otro donde es viceversa.
Give z-index: 1; a la mesa con <thead> visible.
Give z-index: 0; a la mesa con el <tbody> visible.
Trate con el desplazamiento horizontal, pero no hasta que encuentre que onScroll no es un evento ie8 (por no mencionar ie6), por lo que debe tomar un descanso de setInterval cada décima de segundo o más para manejar el desplazamiento del <thead> izquierda y derecha en ie8.
Esto le dará un cuerpo de tabla de desplazamiento infinito en ambos ejes, con un cabezal de tabla que se desplaza solo en el eje x. Prácticamente funciona en FF, Chrome y Safari. Pero es inestable en ie8. Una verdadera pita.
¡Buena suerte, y por favor escribe si lo haces funcionar!
derivando de la respuesta de Astrandr ... así es como lo hice, usando su ejemplo:
css:
.transactHistory table
{
width: 320px;
display: block;
}
.transactHistory thead
{
display: inline-block;
}
.transactHistory tbody
{
height: 133px;
display: inline-block;
width: 100%;
overflow: auto;
}
.transactHistory th
{
width: 100px;
text-align:center;
}
.transactHistory tr
{
width: 100px;
text-align:center;
}
.transactHistory td
{
width: 100px;
text-align:center;
}
Mesa:
<div class="transactHistory">
(..table code)
</div>
Solo los navegadores Firefox e IE6-7 son compatibles con el desplazamiento incorporado de <tbody> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table
{
width: 320px;
display: block;
border:solid black 1px;
}
thead
{
display: inline-block;
width: 100%;
height: 20px;
}
tbody
{
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
th, td
{
width: 100px;
text-align:center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>