dati tabulari presenti con i CSS, in cui le cellule troppo ampio, non fanno cose rovina

StackOverflow https://stackoverflow.com/questions/4177242

  •  09-10-2019
  •  | 
  •  

Domanda

Ho righe di dati che voglio presentare in colonne di dimensione fissa. Ad esempio: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
...      ...        ...

Tuttavia, di tanto in tanto uno dei dati della colonna è troppo grande per adattarsi. Se ciò accade, lo voglio influenzare le cellule vicine meno possibile, non l'intera riga se non è necessario.

Ecco quello che DO desiderare: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon 805 555 5555  # Notice how phone number is still aligned :)

Ecco quello che NON desiderare: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon     805 555 5555  # Notice how phone number is also shifted :(

Come posso fare questo con HTML / CSS (javascript per favore)?

Ecco un jsbin con una soluzione non-lavoro, dove si può giocare in giro e vedere di persona.

Aggiorna Ecco una sintesi della risposta accettata, quando si dispone di N colonne:

Il primo N-1 colonne devono essere avvolto all'interno di uno stile DIV = "display: inline-block" cui min-width è la larghezza combinata dei primi N-1 colonne. Poi dentro che DIV, il primo N-2 colonne devono essere avvolto all'interno di un div simile cui min-width è la larghezza combinata dei primi N-2 colonne. Continuare questo fino in fondo ...

Non è bello, ma funziona, ed è gestibile per piccola N.

È stato utile?

Soluzione

Buona domanda. Non riuscivo a trovare un modo per farlo con un tavolo normale (in parte a causa degli elementi di wrapper necessari, in parte perché IE non si sarebbe comportato correttamente) in modo che la soluzione qui di seguito usi div.

Prova questo: 

<!DOCTYPE html>
<title>Test Case</title>
<style type="text/css">
    body { font-size:11px; font-family: "Courier New"; }
    * { margin:0; padding:0; }

    .col, .span { display:inline-block; }
    .col1 { min-width:12ex; }
    .span2 { min-width:30ex; }
    .span3 { min-width:40ex; }

    /* IE6 */
    * html .col { display:inline; padding-right:1ex; }
    * html .span { display:inline; white-space:nowrap; }
    * html .col1 { width:12ex; }
    * html .span2 { width:30ex; }
    * html .span3 { width:40ex; }

    /* IE7 */
    *:first-child+html .col { display:inline; padding-right:1ex; }
    *:first-child+html .span { display:inline; }
</style>
<div class="table">
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Name</div>
      <div class="col">City</div>
    </div>
    <div class="col">Number</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Adam</div>
      <div class="col">Anaheim</div>
    </div>
    <div class="col">714 555 5555</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Bob</div>
      <div class="col">Barstow</div>
    </div>      
    <div class="col">760 555 5555</div>
  </div>
  <div class="row">
    <div class="span3 span">
      <div class="span2 span">
        <div class="col1 col">Constantine</div>
        <div class="col">Canyon</div>
      </div>         
      <div class="col">805 555 5555</div>
    </div>         
    <div class="col"># Notice how phone number is still aligned :)</div>
  </div>
</div>

Dovrebbe essere chiaro come espandere questa idea ad ulteriori colonne utilizzando involucri "span4", "span5", ecc.

Altri suggerimenti

Vi suggerisco di utilizzare un div all'interno del td <td><div class="mydiv">your content</div></td>

Poi si dà in css .mydiv {overflow:auto;} e questo aggiungerà rotoli quando è necessario, senza rovinare la vostra tavola.

Modifica - Ho appena visto che si utilizza div invece di tavolo. Perchè questo?

In ogni caso è possibile utilizzare la proprietà display:table; display:table-row; e display:table-cell; per rappresentare i dati tabulari.

Ecco un esempio http://jsbin.com/evoka3/3

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top