隐藏的表格列colspan无法运作

Question

我有一张桌子，每行有4个td单元格。它有一个隐藏的行，td colspan="4"里面有一个行。

当我显示隐藏的行时，它会忽略colspan="4"-是因为它首先被隐藏了吗？

有没有办法解决？

的HTML

<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="hidden" id="123">
    <td colspan="4">full width</td>
  </tr>
</table>
<a href="#" onclick="showRow(); return false;">click me</a>

Java脚本

function showRow(){
  el = document.getElementById('123');
  el.style.display = 'block';
}

的CSS

.hidden { display:none; }

这是一个小提琴

Answer 1

它不是一个块，它是一个表行

el.style.display = 'table-row';

最好删除hidden该类。

el.classList.remove("hidden");  //FYI, not all browsers support classList