Início / coding / Perguntas / 79447433
Accepted
p pb
Asked: 2025-02-18 15:27:42 +0800 CST

A extensão de linhas da tabela HTML não está funcionando como esperado

  • 772

Neste seis e primeiro, ambos pegando 2, rowspanainda seis está pegando apenas uma linha e sete também pegando apenas uma linha, apesar de eu ter escrito rowspan2, devido a isso, primeiro e seis são diferentes porque o primeiro está funcionando bem, enquanto o seis não.

table { border-collapse: collapse }
td, th { border: solid thin black }
<table>
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
  </tr>
</table>

html

2 respostas

  1. Como o comentário mencionou, você precisará de trlinhas adicionais.

    Tive que inserir alguns elementos adicionais, que são escondidos usando visibility: hidden;CSS e adicionei um extra tdque define a altura da trterceira linha. Depois disso, rowspanestava funcionando como esperado.

    table,
th,
td {
  border: 1px solid white;
  border-collapse: collapse;
}

th,
td {
  background-color: #96D4D4;
}
    <table>
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
    <td style="visibility: hidden" rowspan="1">hidden</td>
  </tr>
  <tr>
    <td style="visibility: hidden">hidden</td>
  </tr>
</table>

    • 1
  2. Best Answer

    Se todos os elementos td em uma linha tiverem rowspanmais de 1, então a altura das linhas estendidas que não têm um td com rowspan=1será zero. Você pode verificar isso nos snippets abaixo:

    • Nesta tabela, a altura da primeira linha é zero, porque todos os elementos td na primeira linha têm rowspanmais de 1.

    <table border="1">
  <tr>
    <td rowspan="3">first</td>
    <td rowspan="3">second</td>
    <td rowspan="3">third</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

    • Nesta tabela, tanto a primeira quanto a segunda linhas têm altura zero, porque todos os elementos td na primeira e segunda linhas têm rowspanmais de 1.

    <table border="1">
  <tr>
    <td rowspan="3">first</td>
    <td rowspan="3">second</td>
    <td rowspan="3">third</td>
  </tr>
  <tr>
    <td rowspan="2">four</td>
    <td rowspan="2">five</td>
    <td rowspan="2">six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

    É o mesmo caso no snippet dado na pergunta. Verifique o snippet abaixo. Adicionei uma linha extra, mas ainda assim as células seis e sete não parecem abranger duas linhas. Isso ocorre porque a terceira linha tem altura zero. Tente adicionar um elemento td com rowspan=1à terceira linha clicando nos botões, então você notará que as células seis e sete estão se expandindo para duas linhas.

    document.getElementById('add-column').addEventListener('click', () => {
    let td = document.createElement('td')
  td.append('eight')
    document.getElementsByTagName('tr')[2].appendChild(td)
  
  calculateHeight()
})

document.getElementById('remove-column').addEventListener('click', () => {
    document.getElementsByTagName('tr')[2]
                .getElementsByTagName('td')[2]
          ?.remove()
          
  calculateHeight()
})

const calculateHeight = () => {
    let height = document.getElementsByTagName('tr')[2].getBoundingClientRect().height;
  
  document.getElementById('height')
                .innerText = Math.round(height)
}

calculateHeight()
    <table border="1">
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
  </tr>
  <tr>
    <td>nine</td>
    <td>ten</td>
    <td>eleven</td>
    <td>twelve</td>
  </tr>
</table>

<br>

<p>
Height of the third row: <span id="height"></span>
</p>

<br>

<button id="add-column">
Add column without rowspan = 1
</button>

<button id="remove-column">
Remove column without rowspan = 1
</button>

    • 1

relate perguntas