Establezca el ancho de la columna de la tabla constante independientemente de la cantidad de texto en sus celdas?

Al tratar con tablas, establecer el ancho de la celda de la tabla que no depende del contenido o el tamaño del texto es una tarea desafiante. Cuando el texto de las celdas de la tabla se ha vuelto demasiado largo/largo, el ancho de la columna cambiará automáticamente. Para arreglar el ancho de la columna de la tabla, utilice la propiedad "Tabla-Layout" y establezca su valor como "fijo".

Esta publicación demostrará:

• Cómo hacer una mesa en html?
• Cómo establecer el ancho de la columna de la tabla constante independientemente de la longitud del texto?

Cómo hacer una mesa en html?

Para hacer una tabla en HTML, pruebe el procedimiento mencionado a continuación.

Paso 1: crear una tabla

Primero, cree una tabla con la ayuda del "

"Etiqueta e inserte el"borde"Atributo para establecer el borde alrededor de la mesa.

Paso 2: Agregue filas y celda de encabezado

A continuación, agregue las filas de la tabla con el "

"Etiqueta y agregue celdas de encabezado utilizando el""Etiquetas:

". El texto del encabezado se define entre el "	"Etiquetas: Paso 3: Agregar celdas de datos Para agregar las celdas de datos, el "	"La etiqueta se usa entre el"

Nombre de pila	Apellido	DIRECCIÓN
Hafsi	Rana	Casa no 3 Reino Unido
Jenny	Mughal	Casa no 219 Turquía
Mari	Awan	Casa no 487 Canadá

La tabla ha sido creada con éxito:

Cómo establecer el ancho de la columna de la tabla constante independientemente de la longitud del texto?

Para establecer el ancho de la columna que es constante, independientemente de la cantidad de texto, siga las instrucciones a continuación.

Paso 1: Establecer el diseño de la tabla

Primero, acceda a la tabla en CSS con la ayuda del nombre de la etiqueta. Luego, aplique el "saqueo"Propiedad y establecer el valor"fijado"Para hacer constante el ancho de las células de la tabla.

Paso 2: Aplicar otras propiedades CSS

Para el estilo de la tabla, utilice las propiedades codificadas a continuación:

mesa
Layout de tabla: fijo;
borde: 2px sólido RGB (240, 113, 10);
Ancho: 200px;
margen: auto;
Color de fondo: RGB (245, 210, 210);

Aquí:

• El "borde"Es una propiedad abreviada utilizada para definir el borde, el estilo del borde, el ancho y el color.
• A continuación, el "ancho"Se utiliza para establecer el ancho del elemento.
• El "margen"Determina el espacio exterior del límite definido.
• Entonces el "color de fondo"Propiedad utilizada para establecer el color de fondo en la parte trasera del elemento.

Producción

Paso 3: Establezca el ancho de la celda de la tabla

Acceda a las celdas de la tabla, como el encabezado y las celdas de datos, utilizando "th" y "TD":

th, td
borde: 2px sólido RGB (14, 156, 250);
desbordamiento: oculto;
Ancho: 150px;

Aquí el "DesbordamientoLa propiedad se establece como oculta. Esta propiedad especifica qué debería suceder si el contenido se desborda en las celdas de la tabla.

Producción

Hemos demostrado el método para configurar el ancho de la columna de la tabla constante.

Conclusión

Para establecer la constante de ancho de la columna de la tabla, primero, cree una tabla utilizando el "

" etiqueta. Entonces, usa el "saqueo"Propiedad CSS y establece su valor como"fijado"Para arreglar el tamaño del diseño de la tabla. Después de eso, aplique otras propiedades de CSS, como "ancho "," frontera "," desbordamiento "y" margen"Propiedades, para diseñar la mesa. Esta publicación ha demostrado el método para configurar la columna de tabla constante independientemente del texto en sus celdas.

• « Más de 1 fila en <Input type=”textarea” />
• ¿Por qué la altura no funciona al 100% para expandir los divs a la altura de la pantalla?? »