Ho solo una <UL> e sotto che abbiamo gruppo di <LI>Come modellare la mia lista non ordinata come un tavolo?
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
ora volevo mostrare loro come TAVOLO, please help me con i CSS, come possiamo mostrare come un tavolo per sopra UL/LI in sotto forma di tabella, 2 LI situata in uno TR (due TD) e così via ....
Bene, ecco una possibile soluzione:
ul {
width: 450px; /* change it to whatever you like */
position: relative;
/* these should be probably already set up by `reset.css` */
list-style-type: none;
margin: 0;
padding: 0;
}
ul:before, ul:after {
text-align: center;
display: block;
border: 1px solid black;
border-bottom: 0;
width: 48%;
}
ul:before {
content: 'col1';
border-right: 0;
}
ul:after {
content: 'col2';
position: absolute;
top: 0;
left: 48%;
margin-left: 1px;
}
li {
text-align: right;
width: 48%;
float: left;
border: 1px solid black;
margin-bottom: -1px;
}
li:nth-child(even) {
margin-left: -1px;
}
Funziona (JSFiddle; testato in Chrome, Firefox e Opera; nth-child(even) selettore non riesce ovviamente in IE8, in modo da avere di emulare con classe o con altri mezzi; ma per il resto è ancora solido), ma ammetto di sentirmi in colpa per questo.)
P.S. Se si desidera aggiungere imbottitura per i contenuti "cella", non dimenticare di cambiare le loro larghezze pure, come here:
li {
width: 47%;
padding-right: 1%;
}
Per il mio (mite) divertimento, in realtà [funziona bene] (http: // jsfiddle .net/Unwh6/4 /) con $ .sortable: almeno la tabella non inizia a cadere a pezzi.) – raina77ow
È piuttosto impressionante. :) Tuttavia, come previsto, ordina la tabella per cella, non per riga (che credo fosse l'intenzione dell'OP). – Steve
@raina ... WOW perfetto per il mio scanario! – user584018
non è possibile convertire un unico elenco (contenente più di 2 articoli) in 2 colonne tramite le proprietà display: table perché hai bisogno di qualche elemento per agire come la fila della tabella. Senza un elemento che funge da riga di tabella, tutti gli elementi adiacenti impostati su display: table-cell saranno contenuti all'interno di un elemento di riga tabella anonimo che non può essere modificato o modificato in alcun modo.
L'unica opzione è quella di cambiare sia il markup (per usare le tabelle o elenchi di liste) oppure utilizzare un approccio diverso al vostro CSS: o galleggianti/inline-block sulle li s o utilizzando la proprietà columns sul ul.
E 'una risposta molto tardi, ma penso che questo è un argomento comune. Here's a codepen I made.
Ovviamente è solo un punto di partenza. Ha anche qualche esempio di come aggiungere stili come bg o bordi. Se le "celle" contengono alcuni contenuti arbitrari, dovrai adattare le dimensioni, ad esempio. Io uso questo tipo di codice per le gallerie di miniature, per esempio, dove non devi preoccuparti di confini o BGS ed è il codice abbastanza elementare (l'esempio è per una tabella 2x3, vedere codepen):
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Spero che sia d'aiuto.
Cosa stai cercando di ottenere utilizzando una tabella anziché una lista non ordinata? –
Puoi chiarire per favore cosa stai cercando di fare? – Kermit
Non è possibile impostare CSS come HTML. Ciò che puoi fare, tuttavia, è di disegnare la tua lista non ordinata in modo che sia rappresentata come tabella. – raina77ow