Utilizzo di CSS per creare celle di tabelle di una larghezza specifica senza il ritorno a capo automatico

Question

In un progetto sono stato coinvolto in cui avevo bisogno di renderizzare tabelle con colonne di una larghezza specifica con una sola riga HTML per riga di tabella (nessun wrapping). Ho bisogno che ogni cella della tabella abbia un'imbottitura di 1 pixel in alto e in basso e 2 pixel a sinistra e a destra. Il modo migliore che posso immaginare che funzioni cross browser è di inserire un div all'interno di un td all'interno del tavolo in questo modo:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

Mi piacerebbe poter eliminare la necessità di aggiungere il div extra. Ho trascorso molte ore a cercare su Google questo problema ma non riesco a trovare un'alternativa.

C'è un modo per fare ciò di cui ho bisogno senza la necessità di aggiungere il div extra? Se sì, che cos'è?

Esiste un modo per ottenere il risultato desiderato senza utilizzare le tabelle?

Answer 1

Sfortunatamente gli elementi della tabella non rispettano l'overflow, quindi dovrai applicarlo a un elemento figlio.

modifica: potrei aver parlato troppo presto, poiché posso creare questo effetto in FF usando max-width e ho scoperto questa cosa che potrebbe funzionare con IE. Impari qualcosa ogni giorno.

edit2: sì, funziona almeno per IE7 ma c'è un serio avvertimento che non puoi avere spazi bianchi nel testo, devono essere convertiti in  . Penso che dovresti probabilmente attenerti alla <div> soluzione per motivi di pulizia e compatibilità.

Answer 2

In realtà, puoi .

Normalmente, la tabella occupa lo spazio necessario. Se dai al table una larghezza del 100%, ci vorrà il 100% della quota con e condividi tra le celle rispetto al loro contenuto .

Non c'è spazio libero in una tabella: ad un certo punto, ci deve essere una cella che occupa lo spazio rimanente una volta impostate le dimensioni degli altri.

Per impostare una larghezza di una cella, devi assegnarle un width e un max-width delle stesse dimensioni . Per una tabella con N colonne, puoi farlo su N-1 colonne e l'ultima colonna occuperà lo spazio rimanente.

Se lo fai su colonne N-2, le due colonne che non sono state riparate condivideranno lo spazio rimanente.

Detto questo, puoi aggiungere white-space:no-wrap e / o text-overflow:ellipsis se lo desideri.

Ecco un esempio di immagine (il mio lettore RSS) & nbsp ;: https: / /i.stack.imgur.com/bPpKP.png

E un esempio dal vivo: https://codepen.io/lehollandaisvolant/pen/ REVNLy? editori = 1100

Puoi vedere che & # 8217; è in realtà incredibilmente potente. Nel codice, puoi vedere:

• alcune celle hanno una larghezza fissa
• alcune celle si adattano al testo che contiene
• alcune celle si adattano al contenitore

E puoi decidere il comportamento di ogni cella (purché ci sia una cella che si adatti al contenitore)

Answer 3

Non è necessario nidificare un div all'interno di ogni cella della tabella. Quanto segue dovrebbe ottenere lo stesso effetto.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

Puoi anche semplicemente sostituire la tabella con div.

Quindi devi definire la larghezza della colonna in CSS (che può essere complicato per funzionare su tutti i browser).

Esempio: il tuo codice dovrebbe apparire così:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>