Formatear tabla HTML con Scrollbar dentro de un iframe!

R

ReyMaximo

Invitado
Hola Gente! como les va? otra vez aca jodiendolos un poco, me van a tener unos dias ya que estoy aprendiendo con css y js, diseñando una aplicacion mas que nada, que va a servidor de timesheet para unos usuarios de una empresa. Vamos a la pregunta, yo necesito un diseño como el de esta tabla:

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

bueno, esta tabla la necesito meter en un iframe que tiene 200px de alto, bueno como a la tabla la voy a llenar con datos que extraigo de la base de datos necesito que siga siendo scrolleable y que aparte haga auto resize de acuerdo al texto. Mi mayor problema esta en que no puedo hacer que se adapte a mi iframe, siempre me queda mal! :( Lo mismo si le agrego columnas, no logro hacerlo... me podrán ayudar???

aca les dejo una imagen de donde tendria que quedar redimencionada...



se los marque con borde rojo...

espero que me ayuden a modificar el codigo de la tabla para que me quede linda...

espero sus consejos y ayudas.

Saludos!!
 
Alex Vojacek

Alex Vojacek

CEO / Webmaster
Staff member
28 March 2010
4,186
261
118
50
www.tecnogaming.com
Lo que se me ocurre por lo que pusiste es hacer algo asi como esto:

en el html, donde estas insertando la tabla, agregas esto:

<div class="tabla-formato" > <table----- aca va todo el codigo de la tabla </div>

Luego, en tu hoja de CSS (si tenes una) agregas esto

.tabla-formato {
width:500px; (largo en pixels)
height:200px; (ancho en pixels)
border: 1px solid #cacaca; (esto es gris, podes probar grey o black sin el #) ej border: 1px solid black)
oveflow-y: visible; (esto es fundamental, le dice al CSS que fuerze la ventana con scroll, esto agrega las barras de scroll)
overflow-x: hidden; (esto le dice que no muestre nada para el parametro x, o sea, solo scrolea de arriba a abajo.
border-radius: 8px; (por si queres bordes redondos, queda mas fashion)
}

Yo creo que con eso tenes casi el 90% de la tabla hecha y bonita, si queres agregarle mas estetica avisame y te doy un par de tips.
 
R

ReyMaximo

Invitado
alex, recien puse el codigo que me pediste, no se si el css de mi tabla anterior estara pisando algo o que, pero me saco el scrolleo automatico de la tabla....

mira yo necesito una tabla similar o igual al del ejemplo que puse mas arriba en el link, tiene que ser IGUAL pero tiene que hacer auto-resize al ancho total del navegador, va a tener 7 columnas en total, pero necesito que siempre se muestre a lo ancho automaticamente mas allá de cuantas tenga...
Aca dejo el codigo con solo la tabla scrolleable, podriamos empezar con sólo hacerla ancha un 100%? despues vemos de ponerle cosas mas fashion, pero mi prioridad es que haga auto-resize al ancho de mi navegador...

Gracias Alex por tu ayuda.

HTML: 
<meta http-equiv="content-type" content="text/html; charset=UTF-8[/img]
<meta http-equiv="language" content="en-us[/img]
<script type="text/javascript[/img]
<!--
/* 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[/img]
<!--
/* 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: 285px;
overflow: auto;
width: 756px
}

/* 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: 262px;
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/selector.html#adjacent-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/selector.html#adjacent-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[/img]
<table class="scrollTable" border="0" cellpadding="0" cellspacing="0" width="100%[/img]
<thead class="fixedHeader[/img]
<tr class="alternateRow[/img]
<th><a href="#[/img]Header 1</a></th>
<th><a href="#[/img]Header 2</a></th>
<th><a href="#[/img]Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent[/img]
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
 
alesio_sps

alesio_sps

Moderador y Guru
21 December 2010
3,022
162
98
38
Proba meter el CSS en el script, creo que por eso no te toma el codigo css que pones en tu archivo css... me paso algo parecido con unas funciones de SMF, igual a ver que dice Alex que es el que la mueve.

Por cierto bienvenido y cuando gustes pasate por presentaciones que hay varios chicos en el foro que no te conocen :)...
 
R

ReyMaximo

Invitado
hola alex, si el codigo lo toma pero hace mierda al formato de la tabla, jajajaj, yo lo que necesito por ahora es la misma tabla que copie en codigo html pero que sea vea con un width del 100%, intente pero nunca pude hacer que se haga toda a lo ancho correctamente.Estaria bueno que me puedan ayudar a modificar el codigo que pase asi me manejo con esa base y no hago quilombos.
Ok despues paso alesio !
 
Alex Vojacek

Alex Vojacek

CEO / Webmaster
Staff member
28 March 2010
4,186
261
118
50
www.tecnogaming.com
Yo te ayudo, pero primero limpia el codigo, eso es un despelote, agregale al principio del header del html un include css y move todos los CSS a una hoja de css llamada style.css si no sabes como hacerlo te explico. Porque asi como esta, es un verdadero quilombo, no es buena costumbre de programacion meter el css dentro del mismo codigo, para eso existe el div class, table class, span class, lo correcto es usar un archivo de css separado, arranquemos con eso y luego vemos de hacerlo como vos queres.

Para que ocupe todo el formato se usa width:100% pero si no se ve en toda la pantalla es porque lo definiste dentro del body y el body esta definido con menos ancho que 100%, proba usar margin-left:auto;margin-right:auto;width:100% eso generalmente activa el auto-resize.

Vayamos por partes, saca TODO el codigo css y metelo en un archivo separado, invoca la hoja de css desde el html con un include.
 
R

ReyMaximo

Invitado
Bueno aca los separe en 3 alex, y funcan bien lo probe en el srv...

CODIGO TABLA

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/img]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en[/img]
<head>
<title>Tabla con Header Fijo y Contenido Scrolleable</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8[/img]
<meta http-equiv="language" content="en-us[/img]
<?php
// Incluyo config javascript
include ('table_js.php');
// incluyo config css
include ('table_css.css');
?>
</head>
<body>
<div id="tableContainer" class="tableContainer[/img]
<table class="scrollTable" border="0" cellpadding="0" cellspacing="0" width="100%[/img]
<thead class="fixedHeader[/img]
<tr class="alternateRow[/img]
<th><a href="#[/img]Header 1</a></th>
<th><a href="#[/img]Header 2</a></th>
<th><a href="#[/img]Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent[/img]
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow[/img]
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow[/img]
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow[/img]
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CODIGO CSS

PHP: 
<style type="text/css[/img]
<!--
/* 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: 285px;
overflow: auto;
width: 756px
}

/* 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: 262px;
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/selector.html#adjacent-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/selector.html#adjacent-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>
CODIGO JAVASCRIPT

PHP: 
<script type="text/javascript[/img]
<!--
/* 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>

Espero su ayuda! Saludos!
 
Alex Vojacek

Alex Vojacek

CEO / Webmaster
Staff member
28 March 2010
4,186
261
118
50
www.tecnogaming.com
Ahora si!, mucho mejor, mas ordenado, mas prolijo, digno de un proyecto.

Aunque yo hubiera usado la funcion <script href type="text/css" ></script> ya que no requiere usar codigo php y es mas rapida en ejecucion, pero para lo que vas a ahorrar en segundos, lo que hiciste esta bien.
Dejame verlo tranqui, que hoy los nenes estan terribles y cuando tenga un tiempo de tranquilidad te doy una mano.
 
R

ReyMaximo

Invitado
ajjajajaja sii yo siempre uso script href alex pero para este caso que estamos analizando el diseño nada mas lo puse con un include...

Ya programe casi todo el sitio, todo puro PHP y Ajax, pero estas tablas me estan matando, creo que ya le agarre idea y por eso ni me siento a ver como es... estaria bueno que se armen un forin de php y SQL y les puedo pasar a ayudar si quieren!

saludos!
 
Alex Vojacek

Alex Vojacek

CEO / Webmaster
Staff member
28 March 2010
4,186
261
118
50
www.tecnogaming.com
Yo de PHP se bastante pero casi nunca lo uso, la verdad es que programo las cosas cuadno tengo que corregir algo o como en el caso de tecnogaming crear un plugin para que haga algo especifico que yo quiero, pero por lo demas, prefiero usar plataformas de contenidos como Wordpress, ya que armar un disenio integro en PHP es algo muy especifico y que requiere de mucho tiempo y dedicacion y es algo que no tengo en este momento.

Me encanta el Ajax, algun dia lo aprendere, no creo que me lleve demasiado, es como todo, te sentas, probas, probas, probas y terminas aprendiendo.
 
Debes iniciar sesión o registrarte para responder aquí.
Arriba Pie