imagenes - tablas en html5

¿Cómo hacer una tabla con anchos de columna iguales en CSS?

Question

Tengo un documento que contiene una tabla como esta:

<table>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
</table>

Usando CSS, necesito establecer todas las celdas al 50% de ancho, con el texto en la "columna" izquierda alineado a la derecha y el texto en la columna izquierda alineado a la izquierda. He probado muchas opciones diferentes, por ejemplo, width: 50%; text-align: left width: 50%; text-align: left , pero los resultados son siempre inusuales. Los resultados deberían verse así:

 _________________________
| word | definition |
|____________|____________|
| word | definition |
|____________|____________|

• No puedo ajustar el código real de la tabla directamente. Solo puedo modificar el estilo CSS.
• La respuesta en Hacer columnas del mismo ancho en <tabla> no es adecuada, porque no conozco el ancho de la página y ese ancho puede variar.

¿Cómo puedo establecer celdas de ancho igual en una tabla de dos columnas en CSS con todo alineado con el centro?

Answer 1

La tabla debe tener width: 100% propiedad. Ver ejemplo aquí

table{
width: 100%;
border-collapse:collapse;
}
td{
width: 50%;
text-align: left;
border: 1px solid black;
}

Acerca de la alineación del texto, dijiste dos cosas diferentes:

Usando CSS, necesito establecer todas las celdas al 50% de ancho, con el texto en la "columna" izquierda alineado a la derecha y el texto en la columna izquierda alineado a la izquierda.

y entonces

¿Cómo puedo establecer celdas de ancho igual en una tabla de dos columnas en CSS con todo alineado con el centro?

Si lo primero es lo que quiere y no puede cambiar su HTML, puede usar td:first-child para darle un estilo diferente a su primera columna.

Si el segundo es su mejor opción, simplemente cambie el valor de text-align al center .

Answer 2

Puede establecer table-layout: fixed; en tu mesa Al usar esto, puede anular el cambio de tamaño automático de la columna del navegador. Luego, su navegador establece el ancho de columna de la primera columna para todos.