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>