Diseño múltiple thead/tbody

Question

Tengo una pregunta sobre la usabilidad/diseño. Actualmente estoy usando algunos JQuery para ocultar/mostrar áreas enteras. Actualmente estos están todos en una gran mesa con un thead en la parte superior como el encabezado principal, seguido de un segundo thead que es el encabezado de lo que se mostrará. El siguiente es otro thead que es el encabezado de lo que está oculto que se muestra en un tbody. Sé que este es un estilo horrible, pero el problema que intento superar es que quiero que todas las filas sean iguales, ya que todas muestran el mismo tipo de datos.

ejemplo

Código es

<table id="report"> 
    <thead> 
    <tr id="header"> 
     <th>Country</th> 
     <th>Population</th> 
     <th>Area</th> 
     <th>Official languages</th> 
     <th></th> 
    </tr> 
    </thead> 

    <thead> 
    <tr> 
     <td>United States of America</td> 
     <td>306,939,000</td> 
     <td>9,826,630 km2</td> 
     <td>English</td> 
     <td><div class="arrow"></div></td> 
    </tr> 
    </thead> 

    <thead> 
     <tr> 
      <td>First Row</td> 
      <td>Second Row</td> 
      <td>Third Row</td> 
      <td>Fourth Row</td> 
      <td>Fifth Row</td> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td colspan="5"> 
      <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /> 
      <h4>Additional information</h4> 
      <ul> 
       <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> 
       <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> 
       <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> 
      </ul> 
     </td> 
    </tr> 
      <tr><td>some other stuff</td></tr> 
    </tbody> 
</table> 

continuación es lo que se mostrará: alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

Ahora, la razón por la que en realidad lo hizo de esta manera, se debe a que por lo general voy a tener 4 filas para el actual Encabezado visualizable (este ejemplo es el país de datos) y solo 3 columnas del encabezado están ocultas (primera fila, segunda, etc.). Esta información dentro de 1 fila es una URL que puede tener entre 10 caracteres y más de 100 (más de 100 es común), lo que da como resultado que la pantalla cambie y mis encabezados se conviertan en 2 o 3 líneas. Si bien lo que quería era que todas las filas permanecieran igual, ¿hay alguna forma de asociar solo 1 cuerpo con 1 pie dentro de la mesa para que no afecte a los demás? Dado que esto es probablemente bastante confuso, existe una mejor manera de tener realmente varias tablas, pero las de cada una siguen siendo las mismas, sin importar los datos ingresados ​​para el tbody. Sé que habrá preguntas, pero cualquier ayuda sería muy apreciada y tenga en cuenta que estoy completamente dispuesto a hacerlo de otra manera. Sin embargo, lo que se requiere es que se puedan ocultar los datos que son una tabla y tendrán un encabezado para esa información. Puede haber una sección visualizable que no tiene que coincidir (podría ser un div) y los datos dentro de cada sección deben mantener el mismo formato.

PD: Si está interesado a continuación es el JQuery que estoy usando para todo esto.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#report thead").children("tr:odd").not("#header").addClass("odd"); 
     $("#report thead").children("tr:odd").not("#header").each(function(index){$(this).attr("id", "id" + index);}); 

     $("#report thead").children("tr:even").not("#header").addClass("bodyhead"); 
     $("#report thead:even").not(":first-child").each(function(index){$(this).attr("id", "bhid" + index);}); 

     $("#report tbody").each(function(index){$(this).attr("id", "bid" + index);}); 
     //$("#report tbody").each(function(index){$(this).attr("id", "id" + index);}); 
     //$("#report tbody").children("tr:not(.odd)").hide(); 
     $("#report tbody").hide(); 
     $("#report thead:even").not(":first-child").hide(); 

     //$("#report tbody #id0").show(); 
     //For header of headers. 
     $("#report thead").children("tr:first-child").show(); 
     $("#report thead").children("tr").not("#header").not(".bodyhead").click(function(){ 
      $("#report #b" + this.id).toggle(); 
      $("#report #bh" + this.id).toggle(); 
      $(this).find(".arrow").toggleClass("up"); 
     }); 
    }); 
</script> 

Answer 1

Múltiple <thead> s en una tabla no es HTML válido. La mayoría de las filas que tiene en <thead> s contienen datos, no encabezados, por lo que debe estar en un <tbody>.

hay alguna forma de asociar solo 1 cuerpo con 1 dentro de la mesa para que no afecte a ningún otro.

Sí, utilice una tabla separada.

Si desea que el ancho de las columnas sea un tamaño estático hasta el fondo para que las tablas se alineen entre sí, configure los estilos table-layout: fixed; width: 100% en cada tabla y establezca width estilos en cada una de las celdas de la primera fila (o, mejor <col> s) que no desea compartir una proporción igual del ancho del diseño.

(Es una buena idea usar table-layout: fixed siempre que sea posible, ya que es más rápido de renderizar y mucho más predecible que el algoritmo de diseño de tabla automática, especialmente en IE, que tiene una implementación ligeramente desordenada, especialmente cuando estás usando colspan.)

Answer 2

general I tendrá 4 filas para el cabecera visualizable real (esto ejemplo es los datos del país) y sólo 3 columnas de la cabecera se oculta (primera fila, segunda etc).

El thead sólo debe incluir los títulos reales, es decir, "País - población - área - Idiomas Oficiales" El resto son datos y pertenece en el tbody.

Lo que ha etiquetado "Primera fila, segunda fila ..." son columnas, no filas. Parece que estás tratando de ocultar todas las filas después de la primera fila. Su mesa debe tener este aspecto:

<table id="report"> 
    <thead> 
    <tr id="header"> 
     <th>Country</th> 
     <th>Population</th> 
     <th>Area</th> 
     <th>Official languages</th> 
     <th></th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td>United States of America</td> 
     <td>306,939,000</td> 
     <td>9,826,630 km2</td> 
     <td>English</td> 
     <td id="tableToggle"><div class="arrow"></div></td> 
    </tr> 
    <tr> 
     <td>First Row</td> 
     <td>Second Row</td> 
     <td>Third Row</td> 
     <td>Fourth Row</td> 
     <td>Fifth Row</td> 
    </tr> 
    <tr> 
     <td colspan="5"> 
      <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /> 
      <h4>Additional information</h4> 
      <ul> 
       <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> 
       <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> 
       <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> 
      </ul> 
     </td> 
    </tr> 
    <tr> 
     <td>some other stuff</td> 
    </tr> 
    </tbody> 
</table> 

Y usted puede ocultar todas las filas después de la primera con algo como esto (suponiendo que comienzan oculto):

$('#tableToggle').toggle(
    function() { 
     $(this).nextAll().show(); 
    }, 
    function() { 
     $(this).nextAll().hide(); 
    }); 

Si usted tiene más de una sección hideable en serie dentro de la misma tabla utilizar

$(this).nextAll().slice(0, n).show(); 

donde n es el número de filas de una sección. O simplemente podría usar una nueva tabla para cada sección oculta.

Estos datos dentro tiene 1 fila es una URL que puede ser desde 10 caracteres a 100+ (100+ es común) que se traduce en toda la pantalla cambiante y mis encabezados de convertirse en 2 o 3 líneas.

No entiendo lo que dice aquí, pero parece algo que puede resolverse controlando las dimensiones de la tabla en su hoja de estilo, como lo sugiere bobince.