Cita: Gracias pero creo que no es suficiente. Cuando inserto una capa en una celda esta va independiente de la celda con lo cual corro el riesgo de q se mueva. No pasaria así si hubiera alguna forma d hacer q la capa s bloquee dentro de la celda. Existe esta función??????
Muchas veces es una buena práctica dejar de lado que el editor de marras ande por ahí insertando las capas
Con unas pocas líneas de CSS, se puede lograr la altura y ancho de nuestra capa y, ya que estamos; que el resto de las celdas tengan también las mismas dimensiones que la capa con scroll.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabla con scroll en una celda</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
table {
width: 600px;
}
td {
width: 300px;
height: 50px;
color: Black;
background-color: #CCCCCC;
}
th {
background-color: #2F4F4F;
color: #FFFFFF;
text-align: left;
}
.scrollable {
width: 300px;
height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<table summary="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">
<caption>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</caption>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">alfa</th>
<th scope="col">beta</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</tfoot>
<tbody>
<tr class="distinta">
<th scope="row">a</th>
<td><span>-</span></td>
<td><div class="scrollable">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tristique. Aenean ac lacus eget metus porttitor facilisis. Aenean augue.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tristique. Aenean ac lacus eget metus porttitor facilisis. Aenean augue.</p>
</div></td>
</tr>
<tr>
<th scope="row">b</th>
<td><span>-</span></td>
<td><span>-</span></td>
</tr>
</tbody>
</table>
</body>
</html> Espero que les sea útil.
