Foros del Web » Creando para Internet » HTML »

¿Como fijar o inmovilizar columnas y filas en html?

 Estas en el tema de ¿Como fijar o inmovilizar columnas y filas en html? en el foro de HTML en Foros del Web. Hola. Disculpen tengo un problema en una tabla de html, en donde la lleno con un query. El problema es que no se como fijar ...
  #1 (permalink)  
Antiguo 06/04/2011, 22:59
 
Fecha de Ingreso: abril-2011
Mensajes: 10
Antigüedad: 13 años
Puntos: 0
Pregunta ¿Como fijar o inmovilizar columnas y filas en html?
Hola. Disculpen tengo un problema en una tabla de html, en donde la lleno con un query. El problema es que no se como fijar o inmovilizar las primeras 4 columnas de mi tabla y el encabezado. Dentro de mi aplicacion uso codigo ASP y un poco de JavaScript. En espera de su respuesta Gracias!
  #2 (permalink)  
Antiguo 07/04/2011, 05:42
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: ¿Como fijar o inmovilizar columnas y filas en html?
aquí tienes un ejemplo sacado de la web. solo fija los encabezados
Cita:
<!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" xml:lang="en" lang="en">
<head>
<title>Pure CSS Scrollable Table with Fixed Header</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />
<script type="text/javascript">
<!--
/* http://www.alistapart.com/articles/zebratables/ */
function removeClassName (elem, className) {
elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass (elem, className) {
removeClassName (elem, className);
elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
return this.replace( /^\s+|\s+$/, "" );
}

function stripedTable() {
if (document.getElementById && document.getElementsByTagName) {
var allTables = document.getElementsByTagName('table');
if (!allTables) { return; }

for (var i = 0; i < allTables.length; i++) {
if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
var trs = allTables[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++) {
removeClassName(trs[j], 'alternateRow');
addCSSClass(trs[j], 'normalRow');
}
for (var k = 0; k < trs.length; k += 2) {
removeClassName(trs[k], 'normalRow');
addCSSClass(trs[k], 'alternateRow');
}
}
}
}
}

window.onload = function() { stripedTable(); }
-->
</script>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com */
/* http://creativecommons.org/licenses/by-sa/2.0/ */

/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}

table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}

h2 {
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}

h3 {
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
}
/* end basic styling */

/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 223px;
overflow: auto;
width: 50%
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}

/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}

/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}

/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}

/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}

/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}

/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 200px;
overflow: auto;
width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors */
html>body thead.fixedHeader th {
width: 200px
}

html>body thead.fixedHeader th + th {
width: 240px
}

html>body thead.fixedHeader th + th + th {
width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors */
html>body tbody.scrollContent td {
width: 200px
}

html>body tbody.scrollContent td + td {
width: 240px
}

html>body tbody.scrollContent td + td + td {
width: 300px
}
-->
</style>
</head><body>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>

</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>

</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>

</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>

</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>

</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>

</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>

</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>

</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>

</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>

</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>

</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>

</tr>
</tbody>
</table>
</div>
</body></html>
  #3 (permalink)  
Antiguo 07/04/2011, 08:36
 
Fecha de Ingreso: abril-2011
Mensajes: 10
Antigüedad: 13 años
Puntos: 0
Pregunta Respuesta: ¿Como fijar o inmovilizar columnas y filas en html?
Muchas Gracias! me ha funcionado, solo que ahora no se si tengas codigo o alguna idea de como inmovilizar las primeras 4 columnas de mi tabla.
  #4 (permalink)  
Antiguo 08/04/2011, 04:28
 
Fecha de Ingreso: abril-2011
Mensajes: 12
Antigüedad: 13 años
Puntos: 1
Respuesta: ¿Como fijar o inmovilizar columnas y filas en html?
hombre, también podrias hacerlo via CSS, no?

<table>
<tr>
<td width="400px">Contenido</td>
</tr>
</table>

Puede que te funcione, prueva a ver.

EDIT: los 400px son un ejemplo
  #5 (permalink)  
Antiguo 08/04/2011, 06:43
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: ¿Como fijar o inmovilizar columnas y filas en html?
he encontrado esto. prueba a ver que tal

Etiquetas: columnas, fijar, filas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:21.