Foros del Web - Ver Mensaje Individual

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