Método 1: usar el atributo HTML 'ancho'
El ' ancho ” es un atributo básico proporcionado por HTML. Establece el ancho o la longitud horizontal del elemento HTML. Para corregir los datos de la tabla, el atributo de ancho se utiliza en los pasos a continuación.
Paso 1: crea una tabla Paso 2: agregue propiedades CSS al elemento 'tabla' Paso 3: Asignación de propiedades al elemento 'td' Paso 4: Asignación de propiedades al elemento 'th' La salida se muestra como: La instantánea anterior muestra que todos los anchos de las columnas se fijan en un 30 % cada uno. La propiedad nth-child() de CSS se usa para crear una tabla de ancho fijo. Esta propiedad obtiene el número de columna y selecciona el ' La salida del bloque de código anterior es: Esta salida muestra que los números de columna 1 y 3 están fijados al ancho del 10%. Dentro de ' mesa ” en la parte de CSS agregue el “ diseño de la mesa: fijo ” propiedad para establecer el “ancho” de los elementos de la tabla de datos: En el archivo HTML, agregue el ' Después de ejecutar el fragmento de código anterior, el resultado es: Así es como el usuario puede fijar el ancho de los elementos Para corregir el ancho de los datos de la tabla, use el ' ancho ' atributo, ' n-ésimo hijo( ) ” separador, y “
En el archivo HTML, utilice un ' ' y ' ” etiquetas y escribir datos en él:
< centro >
< mesa >
< tr >
< el > Nombre < / el >
< el > Estado < / el >
< el > Habitación no < / el >
< / tr >
< tr >
< td > Fajar < / td >
< td > Alumno < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Alumno < / td >
< td > 06 < / td >
< / tr >
< / mesa >
< / centro >
Use el selector de elementos de la tabla en CSS y agregue el ' borde ” de 1px rojo sólido, “ texto alineado ” alinea el texto al centro, y “ ancho ” que establece el ancho total de la mesa al 80%:
mesa {
borde : 1px rojo sólido;
texto- alinear : centro;
ancho : 80 %; }
Utilizar el ' td ” selector de elemento y establece el “ borde inferior ” de 5px rojo sólido, “ relleno ” de 20px para que el elemento sea más prominente, y “ ancho ” establece como 30%:
td {
borde inferior: 5px rojo sólido;
relleno: 20px;
ancho : 30 %;
}
Utilizar el ' el ” selector de elemento para cambiar el color de “ borde inferior ” de rojo a verde mar para crear una mejor visualización:
el {
borde inferior: 5px verde mar sólido;
relleno: 20px;
ancho : 30 %;
}
Método 2: Usando el Selector “nth-child( )”
' y ' ” etiquetas. Por ejemplo, el ancho es ' fijado ” solo para números de columna “ 1 ' y ' 3 ”. Cada una de estas columnas tiene un ancho del 10%. Este artículo ha demostrado con éxito cómo corregir el ancho de la tabla de datos. td:nth-child ( 3 ) {
ancho : 10 %;
}
th:nth-child ( 1 ) {
ancho : 10 %;
}
Método 3: Uso de la etiqueta
disposición de la mesa: fija;
ancho : 80 %;
borde : 1px rojo sólido;
texto- alinear : centro;
}
< columna estilo = 'ancho: 15%;' / >
< columna estilo = 'ancho: 30%;' / >
de los datos de la tabla.
Conclusión
.