11
Estoy tratando de dividir un TD (celda de tabla) para que parezca dos celdas. El problema es que cuando la celda crece en altura, no puedo hacer que los dos div se encuentren dentro para ocupar toda la altura disponible. Como estas células pueden crecer dinámicamente, tampoco puedo establecer una altura fija (eso podría resolver el problema).Split td en dos
Aquí está mi código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
#span1 { background-color: #DDD; width: 25px; float: right; }
#span2 { background-color: #EEE; width: 24px; float: left; }
.t { border-top: 1px solid black; }
.r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
Esto es como se ve:
no quiero ver a esos espacios en blanco en la columna 3.
Alguna idea de cómo resolver esto? He estado peleando con CSS por un tiempo sin suerte hasta ahora ...
¡Gracias !.
Y de hecho la división de la TDS no es una opción? Entonces el "3" en la parte superior podría estar en una td con 'colspan =" 2 "'. –
¿Quiere decir, usando colspan y/o rowspan? Si ese es el caso, entonces no, esa no es una opción. Aunque podía poner lo que quisiera dentro de las celdas (sin modificar el número de columnas/filas) –