删除html / css中单元格之间的边框

Question

有人能帮助我吗？我试图删除/隐藏表格单元格之间的边框，但是失败了。这是我尝试过的CSS：

<!----- HTML ----->
<div>
  <p style = "font-size: 1.3em">Rooms</p>
  <div id="button-wrapper">
    <button type="button" id="button1" data-check="[name='rooms'][value='1']" clicked>
      <input type="radio" name="rooms" value="1" checked/><span>1</span>
    </button>

    <button type="button" id="button2" data-check="[name='rooms'][value='2']">
      <input type="radio" name="rooms" value="2" /><span>2</span>
    </button>

    <button type="button" id="button2" data-check="[name='rooms'][value='3']">
      <input type="radio" name="rooms" value="3" /><span>3</span>
    </button>

    <button type="button" id="button2" data-check="[name='rooms'][value='4+']">
      <input type="radio" name="rooms" value="4+" /><span>4+</span>
    </button>
  </div>
</div>

这是我的HTML：

table, td, tr{
    border-style: hidden;
    background-color: white;
    border-collapse:collapse;
    border-spacing: 0px;
}

我还是得到了这个：

Answer 1

尝试使用 border：none

此外，右键单击其中一个单元格并选择“Inspect Element”（在Firefox中）。然后在新窗口的右侧（在“规则”下），您可以看到边框的来源（CSS）。

还要确保元素之间没有任何边距，以便背后的元素可能出现背景颜色。但是在使用表时，这应该是不可能的。