positionar thead siempre arriba de tbody

doylelives · #1 (**permalink**) 29/09/2012, 15:41

Hola a todos,

Combinando 2 plugins de jquery, me encontré con un problema un tanto dificil de solventar.
Teniendo estos estilos (definidos por los plugins)

Código Javascript:

Ver originaltbody{
  position:absolute;
  left:0;
  top:0;
};
table{
  position:relative;
}

El problema es simple el tbody se superposiciona sobre el thead, ya intente poner thead en absolute pero no resuelve nada.
El tbody necesita esos styles para uso de uno de los plugins.
Tambien debo hacer uso de table, thead, tbody para el otro plugin.
Lo que desearia es ubicar el tbody por debajo del thead.
Alguna idea?

emprear · #2 (**permalink**) 30/09/2012, 08:23

Cita:

Lo que desearia es ubicar el tbody por debajo del thead.

Pero ese es el orden natural. Distinto si dijeras que querés posicionar el thead por debajo del tbody

Ejemplo

Código HTML:

Ver original<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
thead {
color:green;
position:absolute;
left:0;
top: 60px;
}
tbody {color:blue;
position:absolute;
left:0;
top:0;
}
tfoot {color:red;
position:absolute;
left:0;
top:200px;
}   
 
td, th{
border: solid 1px #000;
}
 
</style>
 
 
</head>
<body>
 
<table>
  <thead>
    <tr>
      <th>Código</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>A+B</td>
      <td>3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>A</td>
      <td>1</td>
    </tr>
    <tr>
      <td>B</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
</body>
</html>

o incluso automatizarlo, si no conocés el alto que te va a ocupar el tbody, pero eso ya sería con javascript, ejemplo

Código HTML:

Ver original<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
thead {
color:green;
position:absolute;
left:0;
}
tbody {color:blue;
position:absolute;
left:0;
top:0;
}
tfoot {color:red;
position:absolute;
left:0;
top:200px;
}   
 
td, th{
border: solid 1px #000;
}
 
</style>
 
 
</head>
<body>
 
<table>
  <thead id="the">
    <tr>
      <th>Código</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>A+B</td>
      <td>3</td>
    </tr>
  </tfoot>
  <tbody id="tb">
    <tr>
      <td>A</td>
      <td>1</td>
    </tr>
    <tr>
      <td>B</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
//<![CDATA[
var Htbody =document.getElementById("tb").offsetHeight;
var alto = Htbody+50;
document.getElementById("the").style.top = alto +'px';
//]]>
</script>
</body>
</html>

Saludos

doylelives · #3 (**permalink**) 30/09/2012, 09:16

mmm esto me dió una idea. poner al thead en absolute, y darle un top negativo (-100px) y por ende ubicarlo por encima del tbody con top 0, el cual solo varia siempre en un rango entre 0 y los positivos.

Pero me surgió otra duda, como un plugin necesita aplicar overflow:hidden al div contenedor de toda la table, el thead queda arriba por fuera del container y oculto =\

emprear · #4 (**permalink**) 30/09/2012, 10:25

Cita:

Iniciado por doylelives

mmm esto me dió una idea. poner al thead en absolute, y darle un top negativo (-100px) y por ende ubicarlo por encima del tbody con top 0, el cual solo varia siempre en un rango entre 0 y los positivos.

Pero me surgió otra duda, como un plugin necesita aplicar overflow:hidden al div contenedor de toda la table, el thead queda arriba por fuera del container y oculto =\

Siendo este el posicionamiento por defecto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tbody</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
thead {color:green}
tbody {color:blue;}
tfoot {color:red;} 
/*]]>*/
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>thead</th>
<th>thead</th>
</tr>
</thead>
<tfoot>
<tr>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tbody - por defecto se ubica debajo del thead y sobre el tfoot</td>
<td>tbody - por defecto se ubica debajo del thead y sobre el tfoot</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
</table>
</body>
</html>

sigo sin entender el objetivo final de tu planteo.
Saludos

doylelives · #5 (**permalink**) 30/09/2012, 11:15

Son condiciones a respetar para usar 2 plugins de jquery (datatables y otro de vertical scrolling).
el container me especifica el area donde el scrolling actua(height:60px) y su visibilidad (overflow:hidden), el scrolling solo debe mover el contenido del tbody, no el thead.
Como ves a continuacion el thead desaparece fuera del container.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tbody</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
thead {
    color:green;
    position:absolute;
    top:-13px;
}
tbody {
    color:blue;
    position:absolute;
    top:0;/*este valor varia de 0 a positivos, por medio de un plugin*/
}
tfoot {color:red;} 
.container {
    margin-top:100px;
    position:relative;
    overflow:hidden;
    height:60px;
}
/*]]>*/
</style>
</head>
<body>
<div class="container">
<table border="1">
<thead>
<tr>
<th>thead</th>
<th>thead</th>
</tr>
</thead>
 
<tbody>
<tr>
<td>tbody - por defecto se ubica debajo del thead y sobre el tfoot</td>
<td>tbody - por defecto se ubica debajo del thead y sobre el tfoot</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
</table>
</body>
</div>
</html>

emprear · #6 (**permalink**) 30/09/2012, 11:39

supongo que habría que ver todo el conjunto para notar el problema.
Estuve viendo el plugin dataTables y veo que tiene opciones para scrolling en la tabla, ¿para que un plugin adicional?

No sé si te sirva, pero a veces trabajo con esto
http://foros.emprear.com/html/tabla_con_scroll/
se que no es lo mismo, pero quizás puedas extraer algo

Saludos