html - style - Mesa de dos columnas: una tan pequeña como sea posible, la otra toma el resto

td title html

Question

Tengo una tabla to-columns en un div:

<div>
<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
... same structure in all the table
</tbody>
</table>
</div>

Y me gustaría que la columna "acción" se ajuste al contenido y la columna "contenido" para tomar el resto del espacio disponible. La columna de "acción" se vería mejor con una alineación a la derecha. La tabla también debe ajustarse al 100% del ancho del contenedor.

¿Hay alguna manera de hacerlo sin fijar el ancho de las columnas?

Intenté con esto:

table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}

Pero la columna de la izquierda ocupa la mitad de la tabla ...

Answer 1

Encontré esta respuesta al tratar de hacer una columna de tantas pequeñas como sea posible .

Si le damos al contenido td un width 1%, lo .content{ width: 1% } a ocupar el menor espacio posible, por lo que el .content{ width: 1% } me funcionó.

Answer 2

Establezca el width: 1px la columna width: 1px y white-space: nowrap .

Esto intentará hacerlo 1px, pero el nowrap evitará que se vuelva más pequeño que el elemento más ancho en esa columna.

Answer 3

Si se le da al contenido td un ancho del 100%, se forzará a ocupar tanto espacio como sea posible, por lo que .content{ width: 100% } debería funcionar.

Dale también al .action un white-space: nowrap para asegurarte de que la x y la marca de verificación permanezcan una al lado de la otra. De lo contrario, el contenido podrá ocupar aún más espacio y forzar a los iconos uno debajo del otro.

table .action
{
width:auto;
text-align:right;
white-space: nowrap
}
table .content {
width: 100%
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
border: 1px solid
}

<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
</tbody>
</table>