Cabecera de una tabla Fija

Jocluis · #1 (**permalink**) 22/12/2008, 21:03

Alguien sabe como fijar una cabecera de una tabla siempre visible?

caricatos · #2 (**permalink**) 22/12/2008, 23:07

Hola:

La cabacera de una tabla deberías ponerla con el tag thead, y el cuerpo con tbody, pero si la cabecera no lleva la estructura de columnas de la tabla, también se puede usar caption, y si piensas en darle dinamismo a esa tabla puedes hacerlo en el tbody.

Saludos

JavierB · #3 (**permalink**) 23/12/2008, 03:41

Hola Jocluis y caricatos

Este enlace puede ser interesante:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Saludos, :adios.

Jocluis · #4 (**permalink**) 09/01/2009, 23:00

Gracias JavierB, pero solo funciona en firefox x)
para internet explore encontre este codigo-(disculpe me olvide el enlace)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lock Table Headings 5</title>
<style type='text/css'>

/* Scrollable Content Height */
.scrollContent {
 height:100px;
 overflow-x:hidden;
 overflow-y:auto;
}
.scrollContent tr {
 height: auto;
 white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.scrollContent tr td:last-child {
 padding-right: 20px;
}

/* Fixed Header Height */
.fixedHeader tr {
 position: relative;
 height: auto;
}

/* Put border around entire table */
div.TableContainer {
 border: 1px solid #7DA87D;
}

/* Table Header formatting */
.headerFormat {
 background-color: white;
 color: #FFFFFF;
 margin: 3px;
 padding: 1px;
 white-space: nowrap;
 font-family: Helvetica;
 font-size: 16px;
 text-decoration: none;
 font-weight: bold;
}
.headerFormat tr td {
 border: 1px solid #000000;
 background-color: #7DA87D;
}

/* Table Body (Scrollable Content) formatting */
.bodyFormat tr td {
	color: #000000;
	margin: 3px;
	padding: 1px;
	border: 0px none;
	font-family: Helvetica;
	font-size: 12px;
}

/* Use to set different color for alternating rows */
.alternateRow {
  background-color: #E0F1E0;
}

</style>
<!--[if IE]>
<style type="text/css">
/* IE Specific Style addition to constrain table from automatically growing in height */
div.TableContainer {
 height: 121px; 
 overflow-x:hidden;
 overflow-y:auto;
}
</style>
<![endif]-->
</head>
<body>

Lock Table Headings<br />
<br />

<table cellpadding="0" cellspacing="0" border="0"><tr><td><div class="TableContainer">

 <table class="scrollTable">
  <thead class="fixedHeader headerFormat">
   <tr><td>Title #1</td><td>Title #2....</td><td>Title #3.......</td><td>#4</td></tr>
  </thead>
  <tbody class="scrollContent bodyFormat">
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
   <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
   <tr class="alternateRow"><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
  </tbody>
 </table>

</div></td></tr></table>

</body>
</html>