css - div - rowspan bootstrap table
HTML colspan en CSS (14)
Estoy tratando de construir un diseño similar al siguiente:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
Donde el fondo está llenando el espacio de la fila superior.
Si se tratara de una tabla real, podría hacerlo fácilmente con <td colspan="3"> , pero como simplemente estoy creando un diseño similar a una tabla, no puedo usar etiquetas <table> . ¿Es esto posible usando CSS?
Eso no es parte del alcance 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.
He creado este violín:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
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;
}
Intente 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;
}
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
</div>
Las clases de Media Query se pueden usar para lograr algo pasable con marcado duplicado. Aquí está mi enfoque con bootstrap:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
</tr>
colspan 1 para móviles, colspan 5 para otros con CSS haciendo el trabajo.
No hay un análogo CSS simple y elegante para colspan .
Las búsquedas en este mismo tema devolverán una variedad de soluciones que incluyen una gran cantidad de alternativas, que incluyen posicionamiento absoluto, tamaño, junto con una variedad similar de advertencias específicas para el navegador y las circunstancias. Lea y tome la mejor decisión informada que pueda basándose en lo que encuentre.
Otra sugerencia es usar flexbox en lugar de tablas por completo. Esto es una cosa del "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 fue 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%;
}
<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div>
Para proporcionar una respuesta actualizada: la mejor manera de hacer esto hoy es usar el diseño de cuadrícula css de esta manera:
.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;
}
Podrías intentar usar un sistema de grilla como http://960.gs/
Su código sería algo como esto, asumiendo que está usando un diseño de "12 columnas":
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
Por lo que sé, no hay colspan en css, pero habrá un column-span de columnas para el diseño de varias columnas en un futuro próximo, pero como solo es un borrador en CSS3, puede consultarlo here . De todos modos, puede hacer una solución alternativa utilizando div y span con una pantalla similar a una tabla como esta.
Este sería el HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
Y este sería el 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 obtener el beneficio del comportamiento del table-layout de la table-layout , lo uso mucho si solo el ajuste de div y span width en cierto porcentaje no cumplió con nuestros requisitos de diseño.
Pero si no necesita beneficiarse del comportamiento del table-layout de la table-layout , entonces la respuesta de durilai le convendría lo suficiente.
Si vienes aquí porque tienes que activar o desactivar el atributo colspan (por ejemplo, para un diseño móvil):
Duplique los <td> y muestre solo los que tengan el colspan deseado:
table.colspan--on td.single {
display: none;
}
table.colspan--off td.both {
display: none;
}
<!-- simple table -->
<table class="colspan--on">
<thead>
<th>col 1</th>
<th>col 2</th>
</thead>
<tbody>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- the <td> spanning both columns -->
<td class="both" colspan="2">both</td>
<!-- the two single-column <td>s -->
<td class="single">A</td>
<td class="single">B</td>
</tr>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<!--
that''s all
-->
<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector(''table'').classList;
function toggle() {
tableClasses.toggle(''colspan--on'');
tableClasses.toggle(''colspan--off'');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>
Siempre se podría position:absolute; Cosas y especificar anchos. No es una forma muy fluida de hacerlo, pero funcionaría.
si usa div y span, ocupará más tamaño de código cuando la fila datagrid-table tenga más volumen. Este código a continuación se comprueba en todos los navegadores.
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
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;
}
<div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
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