Tengo una mesa con 5 columnas. La última fila debe tener dos celdas espaciadas por igual.Colspan abarca 2.5 columnas?
Idealmente, me gustaría usar <td colspan="2.5"> - ¿Cuál es la forma más elegante de hacer esto?
la tabla tiene un borde de 1, por lo que usar
<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>
ve feo
lo que realmente necesita dos celdas de la tabla en la fila inferior o sólo dos bloques que se ¿Son la mitad del ancho de toda la fila? En este último caso, a continuación, se puede hacer una <td colspan="5"> de la última fila, poner dos <div> s en ella, flotar una a la izquierda y el otro a la derecha, y darles width:50%:
<table>
<tbody>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
</tr>
<tr>
<td colspan="5">
<div class="first-half">
half
</div>
<div class="second-half">
half
</div>
</td>
</tr>
</tbody>
</table>
Y un poco de CSS:
.first-half {
float: left;
width: 50%;
}
.second-half {
float: right;
width: 50%;
}
y el jsFiddle habitual: http://jsfiddle.net/ambiguous/mmZEa/
Si los necesita ser celdas de la tabla entonces se podría duplicar el número de células horizontales, haz todas las existentes <td colspan="2">, y luego usar <td colspan="5" width="50%"> para las dos celdas en la fila inferior: http://jsfiddle.net/ambiguous/JzrLK/
+1 ¡también es una buena idea! Gracias – Mawg
Ok, otorgaré la respuesta. Pero admito que hubiera preferido no flotar mucho a diestra y siniestra, sino también tener espacio en cada lado – Mawg
@LeonixSolutions: puedes lanzar un '' dentro de los flotadores para simular el relleno sin estropear el 50% (http://jsfiddle.net/ambiguous/mmZEa/1/) o pon algo de relleno en '
Pruebe algo como esto
<table border="1">
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="3">text</td>
<td colspan="3">text</td>
</tr>
</table>
funcionaba bien en Chrome, Firefox y IE 7-9 .
Ver violín: https://jsfiddle.net/weyy601z/
+1 ¡Para el buen diseño de la mesa antigua! :-) Mientras estas cosas se vuelven ilegibles, son el camino a seguir ... –
hmm, sneaky (+1) Entonces, ¿cuál es el mínimo común denominador? Ok, si hago que cada celda "normal" tenga un bloque de 2 y el de abajo 2 un bloque de 5, debería funcionar. Voy a intentarlo – Mawg
@LeonixSolutions: Sí, eso debería funcionar. Pero el código anterior también funciona, y es más limpio que agregar un colspan en todos los tds. – Emmanuel
Esto parece funcionar muy bien (probado en Chrome, IE y Firefox):
<table border="0" CELLPADDING="0" CELLSPACING="0">
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>abcsss</td>
<td>sdf</td>
<td>def</td>
<td>def</td>
<td>defsssss</td>
</tr>
</table>
<td>
</tr>
<tr>
<td>
<table border="1" width="100%">
<tr>
<td width="50%">test</td>
<td width="50%">test</td>
</tr>
</table>
</td>
</tr>
</table>
Una buena idea, pero ... 1) No quiero que mi tabla sea 100% o incluso%, quiero que sea tan amplia como debe ser, con contenido dinámico, y, 2) que < td width = "50%"> establece la celda de la tabla al 50% del ancho de la página, no de la tabla. – Mawg
@LeonixSolutions corregido. Olvidé rodear mis tablas internas con etiquetas td. Eso confundió a los navegadores. –
+1 una buena solución de tabla anidada – Mawg
cómo es complicado cambiar a base de diseño divs, en lugar de tablas –
+1 un punto válido, aunque esto es solo una pequeña puesta de sol de algo que me grita "mesa" Aún lo reconsideraré. Gracias – Mawg
¿Por qué no lo hice 10 columnas y doblo todo? D'oh! – Mawg