Início / coding / Perguntas / 76922304
Accepted
puntable
Asked: 2023-08-17 22:05:53 +0800 CST

Tabela HTML com 2 linhas de células seguidas

  • 772

Estou trabalhando com uma tabela HTML e queria saber se um layout como mostrado na minha captura de tela é possível?

Eu sei que posso fazer isso com <div>, mas prefiro manter a formatação da tabela.

tabela HTML

html

2 respostas

  1. As células da tabela não são agrupadas em uma linha, então você precisaria de uma nova linha. Dentro dessa linha, a célula da tabela abrangeria as outras colunas.

    As tabelas são para apresentar dados tabulares (linhas e colunas correlacionadas). Se esse não for o seu objetivo (como layout), um método diferente seria preferível. Flexbox ou grade funcionariam bem, dependendo do caso de uso.

    td {
  border: 1px solid;
  text-align: center;
  padding: .25em;
}
    <table>
  <caption>Caption should be included for accessibility</caption>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td colspan="4">Spans all 4 columns</td>
    </tr>
  </tbody>
<table>

    • 1
  2. Best Answer

    Isso é exatamente o que você queria. Lembre-se de que geralmente não é assim que você deve estruturar seu html (mudando uma célula da tabela para a próxima linha).

    *{
    margin: 0;
    padding: 0;
}

table{
    width: 100%;
    border: 1px solid red;
    padding: 5px;
}

tr{
    border: 1px solid blue;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

td{
    height: 50px;
    flex-basis: 24%;
    border: 1px solid green;
    margin: 5px;
    box-sizing: border-box;
}

td:last-child{
    flex-basis: 100%;
}
    <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

    • 1

relate perguntas