none
centrar textos en tablas RRS feed

  • Pregunta

  • Saludos, tengo la siguiente inquietud:

    tengo una tabla que me muestra los datos, bien, incluso puedo generar orden (ascendente y descendente), como se muestra en la figura:


    , pero he tratado de varias formas de CENTRAR el texto y no he podido hacerlo, agrego el codigo, para que vean como lo hago:

    <table class="table text-center" border="1" align="center" id="datos">
        <tr>
            <th>
             @Html.ActionLink("Codigo Categoria", "index", new { sortOrder = ViewBag.IdSortParm })
            </th>
            <th align="center">
             @Html.ActionLink("Nombre Categoria", "Index", new { sortOrder = ViewBag.NameSortParm })
            </th>
            <th align="center"><b>Operaciones</b></th>
        </tr>

    (esto es la cabecera).

    Si alguien me pudiera indicar como puedo centrar los titulos??? o que me indiquen , que estoy haciendo mal???.

    Saludos

    martes, 12 de septiembre de 2017 1:47

Respuestas

  • Lo resolvi de esta manera

    al Inico puse esto:

    <style type="text/css">
        table th {
            text-align: center;
        }
    </style>

     y Listo

    • Marcado como respuesta Rodrigo Menares martes, 12 de septiembre de 2017 3:57
    martes, 12 de septiembre de 2017 3:57

Todas las respuestas

  • Saludos,

    Una forma de hacerlo es sobrescribiendo la clase CSS "text-center", de este modo:

    .text-center { text-align: center !important; }

    Y llamarlo en tus cabeceras <td class="text-center"></td>

    Espero haberle ayudado.


    martes, 12 de septiembre de 2017 2:36
  • Vale, lo unico que hizo fue ajustarme la tabla y no centrarme los textos
    martes, 12 de septiembre de 2017 3:21
  • Lo resolvi de esta manera

    al Inico puse esto:

    <style type="text/css">
        table th {
            text-align: center;
        }
    </style>

     y Listo

    • Marcado como respuesta Rodrigo Menares martes, 12 de septiembre de 2017 3:57
    martes, 12 de septiembre de 2017 3:57
  • Hola:

     En esta linea:

    <table class="table text-center" border="1" align="center" id="datos">

    Podrias agregar

    <table class="table text-center" border="1" align="center" id="datos" style="align-content: center">
     Prueba y nos comentas


    Saludos desde Monterrey, Nuevo León, México!!!

    martes, 12 de septiembre de 2017 4:07
  • Hola:

     En esta linea:

    <table class="table text-center" border="1" align="center" id="datos">

    Podrias agregar

    <table class="table text-center" border="1" align="center" id="datos" style="align-content: center">
     Prueba y nos comentas


    Saludos desde Monterrey, Nuevo León, México!!!

    Creo que hay contar con que el este usando algún framework CSS (Bootstrap, Foundation, Materializecss) puesto que como se puede apreciar en la clase de la tabla llama a una clase que el user-agent (navegador) no agrega por defecto supongo, por lo tal hacer un align-content solo haría que el tbody se centralizara, puesto que quiza hay otro archivo CSS que interviene para que el thead se muestre asi, por eso mas arriba le indique que puede hacer sobrescribiendo la clase text-center que usa agregando el !important, aca otra solucion al problema.

    <style> table, th, td { text-align: center !important; } </style>
    <table class="table" id="datos" border="1">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
      </tbody>
    </table>

    Lo cual evita que cualquier otra hoja CSS intervenga. 


    martes, 12 de septiembre de 2017 4:47