Colspan HTML en CSS

Estoy tratando de construir un diseño similar al siguiente:

+---+---+---+ | | | | +---+---+---+ | | +-----------+ 

donde el fondo está llenando el espacio de la fila superior.

Si esto fuera una tabla real, podría lograrlo fácilmente con

, pero como estoy simplemente creando un diseño similar a una tabla, no puedo usar tags

. ¿Es esto posible usar CSS?

No hay un análogo de CSS sencillo y elegante para colspan .

Las búsquedas sobre este tema arrojarán una variedad de soluciones que incluyen un conjunto de alternativas, que incluyen posicionamiento absoluto, tamaño, junto con una variedad similar de advertencias específicas de navegador y circunstancia. Lea y tome la mejor decisión informada que pueda en función de lo que encuentre.

Por lo que sé, no hay colspan en css, pero habrá un column-span de columnas para el diseño de varias columnas en el futuro cercano, pero dado que solo es un borrador en CSS3, puede consultarlo aquí . De todos modos, puede hacer una solución utilizando div y span con una pantalla similar a la tabla como esta.

Este sería el HTML:

 

Y esta sería la CSS:

  /* this is to reproduce table-like structure for the sake of table-less layout. */ .table { display:table; table-layout:fixed; width:100px; } .row { display:table-row; height:10px; } .cell { display:table-cell; } /* this is where the colspan tricks works. */ span { width:100%; } /* below is for visual recognition test purposes only. */ .red { background:red; } .blue { background:blue; } .green { background:green; } .black { background:black; } /* this is the benefit of using table display, it is able to set the width of it's child object to fill the rest of the parent width as in table */ .first { width: 20px; } .last { width: 30px; } .fill { width: 100%; } 

La única razón para usar este truco es para obtener el beneficio del comportamiento de table-layout de table-layout , lo uso mucho si solo establecer el ancho de div y span a cierto porcentaje no cumplió con nuestro requisito de diseño.

Pero si no necesita beneficiarse del comportamiento de table-layout , entonces la respuesta de durilai le conviene lo suficiente.

Otra sugerencia es usar flexbox en lugar de tablas en conjunto. Esto es un “navegador moderno”, por supuesto, pero vamos, es 2016;)

Al menos esta podría ser una solución alternativa para aquellos que buscan una respuesta a esto hoy en día, ya que la publicación original era de 2010.

Aquí hay una gran guía: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .table { border: 1px solid red; padding: 2px; max-width: 300px; display: flex; flex-flow: row wrap; } .table-cell { border: 1px solid blue; flex: 1 30%; } .colspan-3 { border: 1px solid green; flex: 1 100%; } 
 
row 1 - cell 1
row 1 - cell 2
row 1 - cell 3
row 2 - cell 1 (spans 3 columns)
 
Row 1 - Cell 1
Row 1 - Cell 2
Row 1 - Cell 3
Row 2 - Cell 1

Eso no es parte del ámbito de CSS. colspan describe la estructura del contenido de la página, o da algún significado a los datos en la tabla, que es el trabajo de HTML.

Podría intentar usar un sistema de cuadrícula como http://960.gs/

Su código sería algo así, suponiendo que está usando un diseño de “12 columnas”:

 
1
2
3
123
 column-span: all; /* W3C */ -webkit-column-span: all; /* Safari & Chrome */ -moz-column-span: all; /* Firefox */ -ms-column-span: all; /* Internet Explorer */ -o-column-span: all; /* Opera */ 

http://www.quackit.com/css/css3/properties/css_column-span.cfm

Intenta agregar display: table-cell; width: 1%; display: table-cell; width: 1%; a su elemento de celda de tabla.

 .table-cell { display: table-cell; width: 1%; padding: 4px; border: 1px solid #efefef; } 
 
one
two
three
four
one
two
three
four
one

si usa div y span, ocupará más tamaño de código cuando la fila de la tabla datagrid tenga más volumen. Este código a continuación está marcado en todos los navegadores

HTML:

 

Sl.No

Name

Location

column

column

column

Amount(Rs)

View

Edit

Delete

01

test

TVM

A

I

4575

4575

01

test

TVM

A

I

4575

4575

CSS:

 #gridheading { background: #ccc; border-bottom: 1px dotted #BBBBBB; font-size: 12px; line-height: 30px; text-transform: capitalize; } .data { border-bottom: 1px dotted #BBBBBB; display: block; font-weight: normal; line-height: 20px; text-align: left; word-wrap: break-word; } h4 { border-right: thin dotted #000000; display: table-cell; margin-right: 100px; text-align: center; width: 100px; word-wrap: break-word; } .data .big { margin-right: 150px; width: 200px; } 

Siempre puedes position:absolute; cosas y especificar anchos. No es una forma muy fluida de hacerlo, pero funcionaría.

Creé este violín:

enter image description here

http://jsfiddle.net/wo40ev18/3/

HTML

 
Center Caption
Link 1t
Link 2

CSS

  #table { display:table; } .group {display: table-row-group; } .row { display:table-row; height: 80px; line-height: 80px; } .cell { display:table-cell; width:1%; text-align: center; border:1px solid grey; height: 80px line-height: 80px; } .caption { border:1px solid red; caption-side: top; display: table-caption; text-align: center; position: relative; top: 80px; height: 80px; height: 80px; line-height: 80px; } 

Las clases de Media Query se pueden usar para lograr algo pasable con marcado duplicado. Aquí está mi enfoque con bootstrap:

  

colspan 1 para dispositivos móviles, colspan 5 para otros con CSS haciendo el trabajo.

Para proporcionar una respuesta actualizada: la mejor forma de hacerlo hoy es usar un diseño de cuadrícula de CSS así:

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "top-left top-middle top-right" "bottom bottom bottom" } .item-a { grid-area: top-left; } .item-b { grid-area: top-middle; } .item-c { grid-area: top-right; } .item-d { grid-area: bottom; } 

Si vienes aquí porque tienes que activar o desactivar el atributo colspan (por ejemplo, para un diseño móvil):

Duplique los

s y solo muestre los que tienen el colspan deseado:

 table.colspan--on td.single { display: none; } table.colspan--off td.both { display: none; } 
  
Total <%= number_to_currency @cart.total %>
col 1 col 2
a b
both A B
a b