属于类的表格单元格的HTML范围

我有一个小例子，我想根据用户的选择隐藏/显示单选按钮。但是，由于某些原因，colspan属性无法正常工作

  style.
    .hide {
      display: none;
      font-size: 13px;
      font-weight: bold;
    }
  body
    table(align='center', 8px='', cellpadding="10", border=1)
      tr
        th
          input(type='radio', name='tab', value='red', onclick='red();')
          | Red
        th
          input(type='radio', name='tab', value='blue', onclick='blue();')
          | Blue
      tr
        td#color.hide(colspan='2')
           input(type='radio', value='light', name='one')
           | light red
           input(type='radio', value='dark', name='two')
           | dark red
       tr
         td(colspan='2')
         p test

  script.
    function red() {
      document.getElementById('color').style.display = 'block';
    }
    function blue() {
      document.getElementById('color').style.display = 'none';
    }

我想要的是浅红色和深红色的弹出选择跨越两列，就像表中的最后一个测试条目一样。 我得到了与html相同的示例

.隐藏{ 显示：无； 字体大小：13px； 字体大小：粗体； } 红色 蓝色 浅红色 深红色 试验

功能红{ document.getElementById'color'.style.display='block'； } 功能蓝{ document.getElementById'color'.style.display='none'； } 签出此：

通常tr具有显示：表行；。很明显，布局没有改变 如果使其显示为：block；，则保持不变；。如果在IE中有效，IE 这是错误的

标记无效

所以，通常它有表行，如果您更改它，它将被阻塞。这使得桌子无法控制

.隐藏{ 显示：无； 字体大小：13px； 字体大小：粗体； } 红色 蓝色 浅红色 深红色 试验

功能红{ document.getElementById'color'.style.display='table row'； } 功能蓝{ document.getElementById'color'.style.display='none'； }

---

很接近，只需将javascript代码更改为

document.getElementById('color').style.display = 'table-cell' 

这将使显示为表格单元格，而不是

document.getElementById('color').style.display = 'block';

它尝试显示为任何其他HTML标记 这解决了你的问题

另一个答案建议使用表行，如果使用来显示/隐藏，它将准确工作，在这种情况下，您使用的是单元格，因此表单元格属性是合适的

与相关的标记具有不同的显示属性，您可以从中获取有关显示属性的信息

功能红{ document.getElementById'color'.style.display='table cell'； } 功能蓝{ document.getElementById'color'.style.display='none'； } .隐藏{ 显示：无； 字体大小：13px； 字体大小：粗体； } 红色 蓝色 浅红色 深红色 试验

---

@WildFly我已经更新了答案并进行了更多解释，您将对显示属性有更好的了解。