Cella di tabella orizzontale CSS spaziatura: come?

Speriamo che sia facile ma non ho trovato una soluzione. Voglio mettere lo spazio tra le colonne su un tavolo.Cella di tabella orizzontale CSS spaziatura: come?

Esempio

| Cell |<- space ->| Cell |<- space ->| Cell |

Un punto importante è che non voglio che lo spazio sui bordi. Esiste una proprietà di spaziatura dei bordi ma non è supportata in IE (6 o 7), quindi non va bene. Mette anche lo spazio ai bordi.

Il meglio che ho trovato è mettere padded-right: 10px sulle celle del mio tavolo e aggiungere una classe all'ultimo per rimuovere il padding. Questo è meno che ideale perché lo spazio extra è parte della cella non al di fuori di esso. Immagino che potresti fare la stessa cosa con un bordo trasparente?

Ho anche provato ad utilizzare jQuery:

$(function() { 
    $("table > tbody > tr:not(:last-child").addClass("right-padding"); 
});

ma anche sui tavoli che sono solo ~ 100 righe in formato questo stava prendendo 200-400ms in alcuni casi, che è troppo lento.

Qualsiasi aiuto apprezzato.

Grazie

Per quelle colonne che suggeriscono che non funzionano. Prova questo:

<html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    table { border: 1px solid black; } 
    td { background: yellow; } 
    </style> 
</head> 
<body> 
<table> 
<col style="padding-right: 30px;"> 
<col style="padding-right: 30px;"> 
<col> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</tr> 
<tr> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
</tr> 
</table> 
</body> 
</html>

fonte

2009-03-17 Jordie

Il vostro esempio "colonne" funziona perfettamente per me! –

Quale browser?Su Firefox per me Firebug mostra le colonne più grandi della tabella ma le celle della tabella non vengono effettivamente ridimensionate (ovvero le colonne secondo Firebug si estendono oltre la tabella). – Jordie

Chrome non funziona. IE però lo fa. Weird – Jordie

Hai provato a utilizzare il raggruppamento?

<table> 
    <colgroup> 
     <col class="right-padding" /> 
     <col class="right-padding" /> 
     <col /> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td> 
      </td> 
      <td> 
      </td> 
      <td> 
      </td> 
     </tr> 
    </tbody> 
</table>

fonte

2009-03-17 22:06:51 Joel

Non funziona. Vedi sopra. – Jordie

provare a utilizzare col s

esempio

<table> 
    <col style="padding-right:20px;" /> 
    <col style="padding-right:30px;" /> 
    <col /> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

Cols supportano anche le classi :)

speranza che questo aiuta

Darko

MODIFICA: Per chiarire un col è un elemento dichiarato nella parte superiore della tabella per influenzare intere colonne. Il primo elemento col influenzerà la prima colonna, la seconda colonna = seconda colonna e così via. Possono essere raggruppati in colgroup se si desidera assegnare lo stesso stile a più di una colonna.

EDIT2: Dopo qualche ricerca si scopre che gli unici stili affidabili è possibile impostare su un elemento col sono:

confine
sfondo
larghezza
visibilità

Nessun margine o riempimento. Bugger! L'impostazione della larghezza delle colonne risolverà in modo esplicito il tuo problema?

fonte

2009-03-17 22:07:16

Non funziona. Vedi sopra. – Jordie

L'aggiunta di markup per scopi di stile è un no-no semantico. –

Si potrebbe anche considerare l'utilizzo di una serie di div a larghezza fissa a sinistra con margini.Questo potrebbe dare un po 'più di controllo sullo stile degli elementi.

.row div { 
    margin-right: 10px; 
    float: left; 
    width: 50px; 
} 

    <div class="row"> 
     <div>Cell One</div> 
     <div>Cell Two</div> 
     <div>Cell Three</div> 
    </div>

fonte

2009-03-17 22:10:43

Errr .. stiamo sostenendo l'utilizzo di divs anche per i dati tabulari ora? – cletus

No, ma l'OP sembra avere difficoltà a raggiungere lo stile che desiderano con l'elemento tabella. Le tabelle sono sicuramente le migliori per i dati tabulari. –

Cosa ne pensi di aggiungere una cella vuota che funziona come un distanziatore? È possibile utilizzare il col-tag come detto sopra per dare le celle vuote una certa larghezza

<col/> 
<col style="width:20px"/> 
<col/> 
<col style="width:20px"/> 
<col/> 
<tr> 
    <td>Data</td> 
    <td>& nbsp;</td> 
    <td>Data</td> 
    <td>& nbsp;</td> 
    <td>Data</td> 
</tr>

Oppure, se si vuole fare di più con loro, basta aggiungere le classi per loro invece di usin inline styling ...

fonte

2009-03-18 07:01:58 peirix

Utilizzare più markup per scopi di stile? Wow. Questa è un'idea orribile. –

Dopo aver letto tutte le risposte di cui sopra, il suggerimento di Peirix è l'unico che funziona e funziona su tutti i browser. Sì, usare il markup per lo styling è generalmente una cattiva idea, ma nel mio caso particolare questa è l'unica cosa che funziona. L'idea di spaziatura dei bordi è vicina, ma finisce per mettere lo spazio tra l'etichetta: value (prime due celle TD), che sembra male. –

Che ne dici di dare ad ogni tavolo cell un bordo trasparente? Sono abbastanza sicuro che questo lo farà per voi ...

table td { 
    border:solid 5x transparent; 
}

e si può applicare solo orizzontale in questo modo ...

table td { 
    border-left:solid 10px transparent; 
} 
table td:first-child { 
    border-left:0; 
}

Ecco una completa demo di lavoro di ciò in cui credo si sta cercando di realizzare ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
    <title>Layout</title> 
    <style type="text/css"> 
     table { 
     border: 1px solid black; 
     } 

     table td { 
     background: yellow; 
     border-left:solid 10px transparent; 
     } 

    table td:first-child { 
     border-left:0; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     </tr> 
     <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     </tr> 
    </table> 
    </body> 
</html>

non credo IE6 supporta CSS: first-child, ecco una soluzione per questo ...

<!–-[if IE 6]> 
<style type="text/css"> 
    table td { 
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent'); 
    } 
</style> 
<![endif]-->

fonte

2009-03-18 20:58:15

: il primo figlio non è esattamente ampiamente supportato. CSS – Jordie

Lo capisco. Si tratta di scegliere la soluzione migliore per i requisiti. –

Ho aggiunto una soluzione IE6 per te, Jordie. –

-1

La risposta di Josh è abbastanza buona, ma a mio avviso inutilmente complicata. Quando si impostano i bordi della tabella su "nascosti" e si comprime la modalità su "comprimi", i bordi sui bordi esterni delle colonne verranno eliminati, proprio come richiesto.

esempio di lavoro:

foglio di stile:

table#my_table { 
    border-collapse: collapse; 
    border-style: hidden; 
} 

table#my_table td { 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
}

HTML:

<table id="my_table"> 
    <tr> 
    <td>A1</td> 
    <td>A2</td> 
    <td>A3</td> 
    </tr> 
    <tr> 
    <td>B1</td> 
    <td>B2</td> 
    <td>B3</td> 
    </tr>   
</table>

fonte

2011-07-14 13:58:41 martin

risposta di Josh non funziona se si dispone già di bordi intorno vostre cellule, come me.

Ho risolto il problema spostando leggermente l'intera tabella verso sinistra, utilizzando "posizione: relativo, a sinistra: -10px". Ho combinato questo con cellspacing sul tavolo.

<div id='sandbox'> 
    <table cellspacing='10'> 
      <tr> 
       <td class='smoothBox'> 
        ... 
       </td> 
       <td class='smoothBox'> 
        ... 
       </td> 
      </tr> 
    </table> 
</div>

e css:

#sandbox { 
    float: left; 
    position: relative; /* move the whole sandbox */ 
    left: -11px;  /* slightly to the left */ 
    width: 950px; 
    margin-top: 0px; 
    padding: 1px; 
    text-align: left; 
} 
#sandbox table { 
    float: left; 
    width: 100%; 
} 
#sandbox td { 
    width: 300px; 
    vertical-align: top; 
}

Questo è ciò che funziona per me, spero che possa aiutare anche voi.

fonte

2012-01-06 15:20:36 Timo

Si può essere quello che stai Ricerchiamo:

È possibile utilizzare due valori: il primo è il cellspacing orizzontale, la seconda quella verticale.

<table style="border-spacing: 40px 10px;">

fonte

2012-03-05 15:21:49 Lukas

Questo è davvero buono, grazie! – lucaferrario

Ottimo! Due limitazioni: margine su prima e ultima spaziatura e Quirksmode implica non può funzionare per IE7 e sotto http://www.quirksmode.org/css/tables.html – KCD

Se dopo questo stile - prima e/o ultima spaziatura tra le colonne è un problema - puoi mettere il tavolo in un contenitore 'div' con margini negativi a sinistra e/o a destra'. –

E 'lavoro per me

border-collapse: separate; border-spacing: 0px 3px;

fonte

2015-01-25 09:47:41

Cella di tabella orizzontale CSS spaziatura: come?

risposta

Problemi correlati