Esiste una dichiarazione CSS equivalente a & # 8220; larghezza: auto & # 8221; per < table > elementi?

Question

Sto cercando di creare una tabella < > che non superi una certa larghezza (diciamo 500px), anche con bordi di qualsiasi dimensione.

Normalmente, se lo faccio:

(HTML)

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

(CSS)

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

Finirò con una tabella < > che è largo 510px, poiché metà dei bordi sinistro e destro finiranno all'esterno del < div > ;. Quello che voglio è una tabella < > che è largo totale di 500 px (cioè che non supera la larghezza del suo genitore / contenitore). Pertanto, i bordi sinistro e destro sarebbero ciascuno di 10 pixel di larghezza, collocati all'interno della larghezza di 500 pixel contenente < div > - pertanto l'area di contenuto rimanente della tabella sarebbe 480px.

Posso facilmente fare questo tipo di cose a < div > utilizzando la dichiarazione CSS "width: auto." Posso falsificarlo con un tavolo aggiungendo un ulteriore < div > attorno ad esso che usa " larghezza: auto " con il bordo impostato su quel < div > ;, non il < table > ;.

Tuttavia, spero che esista una soluzione più elegante (deve essere cross-browser). Ce n'è uno di cui non sono a conoscenza?

Answer 1

Imposta il div su 480px di larghezza e metti il ??bordo 10px su di esso. Quindi imposta la tabella su una larghezza del 100%

Answer 2

Non sono sicuro che funzionerebbe, ma ... potresti bordare il primo (bordo sinistro) e l'ultimo (bordo destro) TD (o forse TR) invece del tavolo stesso? Ciò dovrebbe dare lo stesso risultato visivo.

Altrimenti, non perderei molto sonno su un DIV wrapper.

Answer 3

Non so se esiste una soluzione cross-browser. Il modello di scatola IE funziona davvero come vorresti: una volta dichiarata la larghezza di un elemento, questa è la larghezza, e quindi viene sottratta da " inner " larghezza dell'elemento il margine e il bordo di riempimento per darti la larghezza dichiarata.

Tutti gli altri browser fanno il contrario: impostano la larghezza dell'elemento sulla larghezza dichiarata e quindi aggiungono il margine e il bordo.

Ho appena testato il tuo codice in IE7 e Firefox 3.5 ed entrambi sembrano essere larghi 500px anche con il bordo nero di 10px. Sono le versioni precedenti di Firefox di cui mi preoccuperei.