HTML - lista en tabla

 
Vista:
sin imagen de perfil

lista en tabla

Publicado por pdro (5 intervenciones) el 20/09/2021 11:27:16
Buenos días :
Estoy intentado hacer una lista en varias columnas.
Lo hago con una tabla sin bordes.
El problema es que la lista se reinicia cada vez que cambio de columna.

A la lista le he dado un formato de este tipo :

ol{counter-reset: item;margin-left: 0; list-style:none;}
ol li{display: block;counter-increment: listStyle;}
ol li::before{display:inline-block; content: counter(listStyle, lower-alpha) ") ";font-style: oblique; margin-right: 0.3em;counter-increment: item;margin-left:1cm;}

La tabla la hago de la siguiente manera :

<ol><table style="border:0px"><tbody><tr><td><li> a </li><li> b </li><li> b </li></td><td><li> v </li><li> f </li><li> r </li></td><td><li> d </li><li> w </li><li> g </li></td><td></td></tr></tbody></table></ol>

Alguna idea de cómo hacer que la lista continúe por donde iba ? Gracias .
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Marvin
Val: 1
Ha aumentado su posición en 46 puestos en HTML (en relación al último mes)
Gráfica de HTML

lista en tabla

Publicado por Marvin (16 intervenciones) el 02/10/2021 23:04:50
Lo mas facil es usar FlexBox cd CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<section class="section1">
    <div class="columnas">1</div>
    <div class="columnas">2</div>
    <div class="columnas">3</div>
</section>
 
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
 
    .section1 {
        width: 400px;
        height: 200px;
        background-color: rgb(212, 212, 212);
        display: flex; /*convierte al contenedor en flex y todos los elementos que estan dentro se ponen uno al lado del otro*/
        justify-content: space-between; /*Hace que el primer elemento toque el borde izquierdo y el ultimo toque el borde derecho*/
        align-items: center; /*Centra verticalmente*/
    }
 
    .columnas {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        font-size: 40px;
        font-weight: bold;
        align-items: center;
        background-color: red;
        border: 1px solid black;
    }
</style>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

lista en tabla

Publicado por pedro (5 intervenciones) el 03/10/2021 10:08:58
Muchísimas gracias.
No había pensado esa opción. Voy a probarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar