0

Buenas tengo estas tablas generadas en pdf mediante php en html, y me gustaría centrarlas, pero no lo consigo. Adjunto el código:

 $content .= '
    <div class="row" >
        <div class="col-md-12">             
          <h2>Jornada 1</h2>
          <h3>'.$user['Fecha_Inicio'].'</h3>
  <table border="0" cellpadding="5">
    <thead>
      <tr>
        <th bgcolor="grey" width="22%">LOCAL</th>
        <th bgcolor="grey" width="22%"></th>
        <th bgcolor="grey" width="22%">VISITANTE</th>
      </tr>
    </thead>  
  ';
  $content .= '
<tr>
      <td width="22%">'.$user['Nombre_E7'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E8'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E9'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E4'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E5'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E2'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E1'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E6'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E3'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E10'].'</td>
  </tr>
';
 $content .= '</table>';

Gracias,

Saludos

3
  • ¿Quieres que la tabla esté centrada en la pantalla o que su contenido esté centrado dentro de la tabla?
    – Rabegi
    Commented el 18 abr. 2018 a las 9:37
  • Que la tabla este centrada en la pantalla Commented el 18 abr. 2018 a las 9:39
  • Entonces sigue las indicaciones que ha dado Vera en su respuesta. Con un margin='0 auto' debería funcionar.
    – Rabegi
    Commented el 18 abr. 2018 a las 9:54

2 respuestas 2

2

Yo, donde pone <div class="col-md-12"> añadiría una nueva clase, por ejemplo algo como esto:

<div class="col-md-12 tableCenter">

Y luego definiría la clase tableCenter con text-align='center' o, según si tienes o vas a poner más clases o elementos, con un margin='0 auto'

1

Puedes centrar la tabla a su contenedor creando una clase, por ejemplo .table-center e indicar los margenes y ancho de la misma.

Demo:

.table.table-center {
  width: auto;
  margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-12">
    <h2>Jornada 1</h2>
    <h3>'.$user['Fecha_Inicio'].'</h3>
    <table class="table table-center">
      <thead>
        <tr>
          <th bgcolor="grey" width="22%">LOCAL</th>
          <th bgcolor="grey" width="22%"></th>
          <th bgcolor="grey" width="22%">VISITANTE</th>
        </tr>
      </thead>
      <tr>
        <td width="22%">'.$user['Nombre_E7'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E8'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E9'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E4'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E5'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E2'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E1'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E6'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E3'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E10'].'</td>
      </tr>
    </table>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.