Come posso creare bordi attorno alle sezioni tbody/thead di una tabella?

Question

Sto tentando di creare una pagina con dati tabulari, che deve apparire come più tabelle. Ho due requisiti contrastanti per andare in giro, tuttavia:

1. Ogni tabella deve avere un bordo attorno ad esso.
2. Le larghezze delle colonne per ogni tabella devono essere ridimensionate in base al contenuto. Tuttavia, le larghezze delle colonne devono essere coerenti su tutte le tabelle. (ad esempio, la dimensione di una colonna si basa sulla cella più grande in quella colonna su tutte le tabelle).

Per gestire il secondo requisito, ho una singola tabella di livello superiore che contiene più sezioni testa e corpo. Questo ha ottenuto il n. 2 in modo bello. In sostanza, ho creato più pseudo-tabelle all'interno di una tabella padre più grande, raggruppati come un singolo thead con una tbody accompagnamento:

<table> 
    <thead> 
     table1 header content... 
    </thead> 
    <tbody> 
     table1 body content... 
    </tbody> 
    <thead> 
     table2 header content... 
    </thead> 
    <tbody> 
     table2 body content... 
    </tbody> 
</table> 

Ora, io sto cercando di affrontare il primo requisito. Ogni pseudo tavolo deve avere un bordo attorno, passandosi come un vero tavolo.

Ho scoperto, con mio grande disappunto, che IE 6/7 non consente di aggiungere stili di bordo attorno ai tag di thead/tbody, altrimenti avrei semplicemente aggiunto uno stile di bordo superiore/sinistro/destro a thead e un fondo/stile di bordo sinistro/destro per tbody.

Creazione di tabelle originali e bordi di stile per questi lavori per risolvere il n. 1, ma si interrompe n.

Un'altra alternativa sarebbe utilizzare gli stili first-child e last-child per creare i miei bordi. Sfortunatamente, questo non è né bello, né funziona in IE 6/7.

Un'altra alternativa che ho cercato è creare un bordo attorno all'intero tavolo e tentare di creare una riga tra le pseudo-tabelle che crea la mia separazione, ma mentre posso creare i bordi superiore/inferiore per esso ok, ho ancora per scoprire un mezzo per cancellare il bordo sinistro/destro della tabella solo per quella riga. È possibile?

La mia ultima alternativa è creare classi per disegnare i bordi sinistro, destro, superiore e inferiore, impostando le celle della tabella appropriate per utilizzare queste classi. So che alla fine funzionerà, ma è terribilmente goffo e rende il markup davvero disordinato. I gruppi di lavoro non possono salvarmi qui, poiché non sono in grado di gestire gli stili di confine. Questo è un peccato, perché renderebbe questa soluzione un po 'più facile da digerire.

C'è un metodo migliore per realizzare i confini che potrei aver perso?

Answer 1

uso <table rules="groups"> o valori simili per rules

vedere http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Answer 2

andare con il metodo per la creazione delle tabelle originali, quindi provare questo.

Vorrei solo creare tabelle separate.Supponiamo che ogni tabella è simile al seguente:

<table> 
    <thead> 
     <tr> 
      <th class="column_1">Header 1</th> 
      <th class="column_2">Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
     </tr> 
     ... 
    </tbody> 
</table> 

Poi, utilizzare jQuery per impostare la larghezza:

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready(function() { 
    $(".column_1").each(function() { 
     if($(this).css("width") > columnOneWidth) columnOneWidth = $(this).css("width"); 
    }); 
    $(".column_2").each(function() { 
     if($(this).css("width") > columnTwoWidth) columnTwoWidth = $(this).css("width"); 
    }); 

    $(".column_1").css({width: columnOneWidth + "px"}); 
    $(".column_2").css({width: columnTwoWidth + "px"}); 
}); 

Tutto quello che dovete fare è includere il file jQuery Javascript (disponibile da jquery.com) nel tag testa:

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>