CSS - Duda con display:table-column-group

   
Vista:

Duda con display:table-column-group

Publicado por Gustavo (8 intervenciones) el 24/04/2014 06:43:40
Bueno y la última duda que tengo con estos valores de la propiedad display es con table-column-group que como bien dijiste xve es colgroup en html.
El problema es que cuando marco la primer fila con este valor desaparece y solo se muestra la segunda fila.


les dejo el código html.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
 
<div id="contenedor">
<div class="tabla">
<div class="grupo-columna-tabla">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
</div>
</body>



y el código 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
#contenedor {
  width: 700px;
  margin: auto;
  }
 
 
.celda  {
  border: solid 1px #000;
  display: table-cell;
  }
 
.fila {
  display: table-row;
  }
 
.tabla  {
  display: table;
  border-spacing: 2px;
  text-align: center;
  border: solid 1px #000;
  }
 
 
.grupo-columna-tabla {display:table-column-group;}
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 xve

Duda con display:table-column-group

Publicado por xve (349 intervenciones) el 24/04/2014 10:38:54
Hola Gustavo, los estilos table-column-group y table-column, no son visibles en la web... intento explicarte...

table-column-group Únicamente se utiliza para englobar varios tipos table-column
Equivale a <colgroup> de HTML

table-column Se utiliza para especificar propiedades de una columna dada
Equivale a <col> de HTML

Aquí te muestro un ejemplo siguiendo tu código. Lo que indicamos, es que la segunda columna tenga un fondo rojo.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<head>
<style>
    #contenedor {
    width: 700px;
    margin: auto;
    }
 
    .celda  {
    border: solid 1px #000;
    display: table-cell;
    }
 
    .fila {
    display: table-row;
    }
 
    .tabla  {
    display: table;
    border-spacing: 2px;
    text-align: center;
    border: solid 1px #000;
    }
 
    .grupo-columna-tabla {display:table-column-group;}
    .columna {display:table-column;}
    .red    {background-color:red;}
</style>
</head>
 
<body>
 
<div id="contenedor">
    <div class="tabla">
        <div class="grupo-columna-tabla">
            <div class="columna"></div>
            <div class="columna red"></div>
            <div class="columna"></div>
            <div class="columna"></div>
        </div>
        <div class="fila">
            <div class="celda">Elemento largo</div>
            <div class="celda">Elemento</div>
            <div class="celda">Elemento</div>
            <div class="celda">Elemento</div>
        </div>
        <div class="fila">
            <div class="celda">Elemento</div>
            <div class="celda">Elemento</div>
            <div class="celda">Elemento</div>
            <div class="celda">Elemento</div>
        </div>
    </div>
</div>
 
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Duda con display:table-column-group

Publicado por Gustavo (8 intervenciones) el 25/04/2014 06:41:19
Ah ok muchas gracias de nuevo xve.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar