Las tablas nos permiten agregar una gran cantidad de datos y presentarlos de forma clara y ordenada. Una mesa Bootstrap básica tiene un acolchado ligero y solo divisores horizontales. La clase base es .table para cualquier tabla, y después de agregarla, podemos extenderla con estilos personalizados o nuestras diversas clases de modificadores incluidas a nuestra tabla con fines de diseño.
Colocar el texto de la tabla en el centro usando Bootstrap: De forma predeterminada, el texto en los elementos <td> siempre es regular y está alineado a la izquierda.
Básicamente tenemos que lidiar con los elementos <td> .
Puede haber dos formas:
- Al agregar text-align: center; en nuestro código CSS para el tds.
- Al agregar la clase » centro de texto» de Bootstrap 3 a un elemento td, también funciona de inmediato.
- Agregando text-align:center en código CSS
La propiedad text-align especifica la alineación horizontal del texto en un elemento. Entonces, en nuestro código CSS, simplemente establecemos la propiedad de alineación de texto de nuestro tds como el centro, y el texto de la tabla se coloca en el centro.
.table td {
text-align: center;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* setting the text-align property to center*/
td {
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Contact Numbers</th>
</tr>
<tr>
<td>Pawan Kumar</td>
<td>1234567890</td>
<td>0987654321</td>
</tr>
</table>
</body>
</html>
Producción:
- Agregando la clase «text-center» de Bootstrap 3
Podemos usar la clase «centro de texto» de bootstrap 3 para la alineación central de un elemento. Entonces, en nuestro td cuando agregamos la clase «centro de texto», y luego nuestro texto de tabla va al centro.
<td class="text-center">.......</td>
Ejemplo :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Contact Numbers</th>
</tr>
<tr>
<td class="text-center">Pawan Kumar</td>
<td class="text-center">1234567890</td>
<td class="text-center">0987654321</td>
</tr>
</table>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA