主页 / coding / 问题 / 79447433
Accepted
p pb
Asked: 2025-02-18 15:27:42 +0800 CST

HTML 表格 Rowspan 未按预期工作

  • 772

在这个六个和第一个中都取 2，rowspan但六个仍然只占用一行，而七个也只占用一行，尽管我已经写了rowspan2，这是由于第一个和六个不同，因为第一个工作正常而六个则不行。

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 个回答

  1. 正如评论所提到的，您将需要额外的tr行。

    我必须插入一些额外的元素，这些元素使用visibility: hidden;CSS 隐藏，并添加一个额外的元素td来定义第三行的高度tr。此后，一切rowspan按预期运行。

    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

    如果一行中的所有 td 元素都rowspan大于 1，则没有 td 的跨行的高度rowspan=1将为零。您可以在以下代码片段中验证这一点：

    • 在这个表中，第一行的高度为零，因为第一行的所有 td 元素都rowspan大于 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>

    • 在这个表中，第一行和第二行的高度都是零，因为第一行和第二行中的所有 td 元素都大于rowspan1。

    <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>

    问题中的代码片段也是同样的情况。请查看下面的代码片段。我添加了额外的一行，但单元格六和单元格七似乎仍未跨越两行。这是因为第三行的高度为零。尝试通过单击按钮将 td 元素添加rowspan=1到第三行，然后您会注意到单元格六和单元格七扩展到两行。

    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

相关问题