0

Tengo una tabla en html y le tengo un poco de css y quiero que el th de "Player" ocupe todo el lugar del tr en su espacio

adjunto mi tabla para más detalle.

<table>
      <tr>
        <th scope="col">Player</th>
      </tr>
      <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
      </tr>
      <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
      </tr>
      <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
      </tr>
    </table>
2
  • 1
    ¿te refieres a un atributo colspan="3" en ese th?
    – masterguru
    Commented el 20 jun. 2022 a las 17:47
  • Sii, gracias... eso me faltaba
    – user259113
    Commented el 20 jun. 2022 a las 17:48

1 respuesta 1

0

Eso se soluciona con un colspan, según la cantidad de celdas que siguen abajo, entiendo que es la cabecera de tu tabla y quedaría con un colapsan de 3, ya que en la siguiente fila es de 3 td, y secciona tu tabla para que te sea mas facil identificar los bloques que la conforman, thead, tbody, tfoot y clases para modificar ciertas celdas con estilos, te dejo un pequeño ejemplo:

.titleTable {
  text-align: center;
}

.namePlayer {
  font-weight: bold;
}

tr>td {
  padding: 7px;
}
<table>
  <thead>
    <tr>
      <th class="titleTable" colspan="3">Player</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="namePlayer" scope="row">TR-7</td>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <td class="namePlayer" scope="row">Khiresh Odo</td>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <td class="namePlayer" scope="row">Mia Oolong</td>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

1
  • Gracias, ya lo pude corregir!!
    – user259113
    Commented el 20 jun. 2022 a las 18:03

Tu Respuesta

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