tabelle - unire due celle in una tabella html




Puoi fare questo layout HTML senza usare le tabelle? (7)

Consiglierei di non utilizzare una tabella in questa istanza, poiché non si tratta di dati tabulari; è puramente presentazionale avere il pulsante posizionato all'estrema destra. Questo è ciò che farei per duplicare la struttura della tabella (passare a un altro H # per adattarlo alla gerarchia del tuo sito):

<style>
  .group-header { background: yellow; zoom: 1; padding: 8px; }
  .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  /* set width appropriately to allow room for button */
  .group-header h3 { float: left; width: 300px; }
  /* set line-height or margins to align with h3 baseline or middle */
  .group-header input { float: right; }
</style>

<div class="group-header">
  <h3>This is my title</h3>
  <input type="button" value="Collapse"/>
</div>

Se vuoi il vero allineamento verticale nel mezzo (cioè, se il testo avvolge il pulsante è ancora allineato al centro rispetto a entrambe le righe di testo), allora devi fare una tabella o lavorare qualcosa con position: absolute e margini. Puoi aggiungere la position: relative al menu a discesa (o più probabilmente al suo genitore) per portarla nello stesso livello di ordinamento dei pulsanti, permettendoti di sbatterla sopra di loro con z-index, se si tratta di quello .

Nota che non hai bisogno di width: 100% sul div perché si tratta di un elemento a livello di blocco e zoom: 1 fa sì che il div si comportino come se avesse un clearfix in IE (altri browser prendono l'effettivo clearfix). Inoltre, non hai bisogno di tutte quelle lezioni estranee se stai mirando a qualcosa in modo più specifico, anche se potresti aver bisogno di un div wrapper o di una span sul pulsante per facilitare il posizionamento.

Ok, ho avuto un semplice problema di layout una settimana o due fa. Vale a dire che le sezioni di una pagina avevano bisogno di un'intestazione:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

Roba abbastanza semplice La cosa è che l'odio da tavolo sembra aver preso il sopravvento nel mondo Web, cosa a cui mi è stato ricordato quando ho chiesto Perché utilizzare gli elenchi di definizioni (DL, DD, DT) per i moduli HTML anziché le tabelle? Ora l'argomento generale delle tabelle vs div / CSS è stato precedentemente discusso, ad esempio:

Quindi questo non vuole essere una discussione generale sui CSS rispetto alle tabelle per il layout. Questa è semplicemente la soluzione a un problema. Ho provato varie soluzioni a quanto sopra usando CSS tra cui:

  • Float a destra per il pulsante o un div contenente il pulsante;
  • Posizione relativa per il pulsante; e
  • Posizione relativa + assoluta.

Nessuna di queste soluzioni è stata soddisfacente per diversi motivi. Ad esempio, il posizionamento relativo ha prodotto un problema con z-index in cui il mio menu a discesa è apparso sotto il contenuto.

Così ho finito per tornare a:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

E funziona perfettamente. È semplice, come compatibile con le versioni precedenti (funzionerà probabilmente anche su IE5) e funziona. Non scherzi con il posizionamento o galleggianti.

Quindi qualcuno può fare l'equivalente senza tavoli?

I requisiti sono:

  • Retrocompatibile: a FF2 e IE6;
  • Ragionevolmente coerente: attraverso diversi browser;
  • Centrati verticalmente: il pulsante e il titolo sono di altezze diverse; e
  • Flessibile: consente un controllo ragionevolmente preciso sul posizionamento (imbottitura e / o margine) e styling.

Una nota a margine, ho trovato un paio di articoli interessanti oggi:

EDIT: permettimi di approfondire il problema del float. Questo tipo di opere:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

Grazie ad Ant P per l' overflow: hidden parte overflow: hidden (ancora non capisco perché però). Ecco dove arriva il problema. Supponiamo che il titolo e il pulsante siano centrati verticalmente. Questo è problematico perché gli elementi sono di diversa altezza. Confronta questo a:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

che funziona perfettamente.


Fai un double float in un div e usa il clearfix. http://www.webtoolkit.info/css-clearfix.html Hai restrizioni di riempimento / margine?

<div class="clearfix">
   <div style="float:left">Title</div>
   <input type="button" value="Button" style="float:right" />
</div>

Ho scelto di usare il flex box perché ha reso le cose molto più semplici.
Devi basicamente andare al genitore dei bambini che vuoi allineare e aggiungere display: box (prefisso ovviamente). per farli sedere nei lati usa il justify-content . lo spazio tra è la cosa giusta quando hai elementi che devono essere allineati alla fine, come in questo caso (vedi link) ...
quindi il problema di allineamento verical. perché ho reso il genitore dei due elementi che vuoi allineare una scatola flessibile, è facile ora usare gli elementi di allineamento: centro. poi ho aggiunto gli stili che volevi prima, rimosso il float dal titolo e il pulsante nell'intestazione e aggiunto un padding.

   .group-header, .group-content {
      width: 500px;
      margin: 0 auto;
    }
    .group-header{
      border: 1px solid red;
      background: yellow;
      overflow: hidden;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      padding: 8px 0;
    }
 .group-content{
      border: 1px solid black;
      background: #DDD;
 }
    .group-title {
      padding-left: 8px;
    }
    .group-buttons {
      padding-right: 8px
    }

Guarda la demo


In puro CSS, una risposta funzionante sarà un giorno solo per usare "display:table-cell" . Sfortunatamente non funziona su tutti i browser A-grade attuali, quindi per tutto quello che potresti usare anche un tavolo se vuoi comunque ottenere lo stesso risultato. Almeno sarai sicuro che funzioni abbastanza nel passato.

Onestamente, basta usare un tavolo se è più facile. Non farà male.

Se la semantica e l'accessibilità dell'elemento tabella sono importanti per te, esiste una bozza di lavoro per rendere la tua tabella non semantica:

http://www.w3.org/TR/wai-aria/#presentation

Penso che questo richieda uno speciale DTD oltre XHTML 1.1, che non farebbe altro che aumentare l'intero dibattito text/html vs application/xml , quindi non andiamo lì.

Quindi, al tuo problema CSS non risolto ...

Per allineare verticalmente due elementi sul loro centro: può essere fatto in modi diversi, con un certo hackery CSS ottuso.

Se puoi adattarti ai seguenti vincoli, allora c'è un modo relativamente semplice:

  • L'altezza dei due elementi è fissa.
  • L'altezza del contenitore è fissa.
  • Gli elementi saranno abbastanza stretti per non sovrapporsi (o possono essere impostati su una larghezza fissa).

Quindi puoi utilizzare il posizionamento assoluto con margini negativi:

.group-header { height: 50px; position: relative; }
.group-title, .group-buttons { position: absolute; top: 50%; }
# Assuming the height of .group-title is a known 34px
.group-title { left: 0; margin-top: -17px; }
# Assuming the height of .group-buttons is a known 38px
.group-buttons { right: 0; margin-top: -19px; }

Ma questo è inutile nella maggior parte delle situazioni ... Se conosci già l'altezza degli elementi, puoi semplicemente usare i float e aggiungere abbastanza margine per posizionarli secondo necessità.

Ecco un altro metodo che utilizza la linea di base del testo per allineare verticalmente le due colonne come blocchi in linea. Lo svantaggio qui è che è necessario impostare larghezze fisse per le colonne per riempire la larghezza dal bordo sinistro. Poiché dobbiamo mantenere gli elementi bloccati su una base di testo, non possiamo semplicemente usare float: giusto per la seconda colonna. (Invece, dobbiamo fare in modo che la prima colonna sia sufficientemente ampia da poterla rovesciare).

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; }
      .valign { display: inline-block; vertical-align: middle; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { padding: 8px; width: 384px; }
      .group-buttons { padding: 8px; width: 84px; text-align: right; }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
      .valign { display: inline; margin-top: -2px; padding-top: 1px; }
    </style>
    <![endif]-->
  </head>
  <body>
    <div class="group-header">
      <div class="valign">
        <div class="group-title">This is my title.</div>
      </div><!-- avoid whitespace between these! --><div class="valign">
        <div class="group-buttons"><input type="button" value="Collapse"></div>
      </div>
    </div>
    <div class="group-content">
      <p>And it works perfectly, but mind the hacks.</p>
    </div>
  </body>
</html>

HTML: aggiungiamo wrapper di valore attorno a ciascuna colonna. (Dare loro un nome più "semantico" se ti rende più felice.) Questi devono essere mantenuti senza spazi vuoti in mezzo oppure spazi di testo li allontaneranno. (So ​​che fa schifo, ma è quello che ottieni per essere "puro" con il markup e separarlo dal livello di presentazione ... Ha!)

Il CSS: utilizziamo vertical-align:middle per allineare i blocchi alla linea di base del testo dell'elemento di intestazione di gruppo. Le diverse altezze di ciascun blocco rimarranno centrate verticalmente e spingeranno fuori l'altezza del loro contenitore. Le larghezze degli elementi devono essere calcolate per adattarsi alla larghezza. Qui, sono 400 e 100, meno la loro imbottitura orizzontale.

Le correzioni di IE: Internet Explorer visualizza solo blocco inline per elementi inline nativi (ad esempio span, non div). Ma, se diamo il div hasLayout e lo visualizziamo in linea, si comporterà proprio come inline-block. L'aggiustamento del margine è quello di correggere un gap di 1px nella parte superiore (prova ad aggiungere i colori di sfondo al .group-title per vedere).


Questa è una specie di domanda trabocchetto: sembra terribilmente semplice fino a quando non si arriva a

Supponiamo che il titolo e il pulsante siano centrati verticalmente.

Voglio dichiarare per iscritto che sì, il centraggio verticale è difficile nei CSS. Quando le persone pubblicano, e sembra infinito in SO, "puoi fare X in CSS" la risposta è quasi sempre "sì" e il loro fruscio sembra ingiustificato. In questo caso, sì, una cosa particolare è difficile.

Qualcuno dovrebbe semplicemente modificare l'intera domanda fino a "la centratura verticale è problematica nei CSS?".


Sono d'accordo sul fatto che in realtà si dovrebbero usare solo tabelle per dati tabulari, per il semplice motivo che le tabelle non mostrano fino al termine del caricamento (non importa quanto sia veloce, è più lento il metodo CSS). Tuttavia, ritengo che questa sia la soluzione più semplice ed elegante:

<html><head><title>stack header</title>
<style type="text/css">
#stackheader {
 background-color: #666;
 color: #FFF;
 width: 410px;
 height: 50px;
}
#title {
 color: #FFF;
 float: left;
 padding: 15px 0 0 15px; 
}
#button {
 color: #FFF;
 float: right;
 padding: 15px 15px 0 0;
}
</style></head><body>
<div id="stackheader">
<div id="title">Title</div>
<div id="button">Button</div>
</div>
</body></html>

La funzione del pulsante e qualsiasi altro dettaglio possono essere abbinati a questo modulo di base. Ci scusiamo per i tag non validi.


<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>




layout