如何消除HTML表格中按钮行之间的垂直间隔？

Question

我有一个div，当按下“ PATTERNS”按钮时会弹出。该div包含一个按钮表（请参见图片）。我希望所有按钮都可以触摸，但是我似乎无法摆脱它们之间的行间距。我不是经验丰富的html表用户。

[我的研究使我尝试了以下操作：

.ButtonTable {
    display: block;
    background: rgb(116, 116, 116);
    position: absolute;
    margin: 0;
    padding: 0;
    left: 2%;
    width: 80%;
    height: 70%; /*BOX HEIGHT*/
    z-index: 1002;
    overflow: auto;
    opacity: .80;
    filter: alpha(opacity=80);
    border-spacing:0;
    border-collapse: collapse;    
}
.PatternButton {
    border-radius: 4px;
    width: 200px;
    transition-duration: 0.2s;
    color: black;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    padding:0;
    margin:0;
    display: inline-block;
    border: none;

}

这里的表格布局是否最佳？

<table className="ButtonTable" cellspacing="0">                     
    <td className="Col12">
        <th className="Title1">col1</th>     
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
        <th className="Title2">col2</th>
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
    </td>                       
    <td className="Col34">
        <th className="Title3">col3</th>
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
        <th className="Title4">col4</th>
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
    </td>                   
    <td className="Col5"> 
        <th className="Title5">col5</th>
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
        <button className="PatternButton">7</button><br></br>
        <button className="PatternButton">8</button><br></br>
    </td>                   
    <td className="Col6">
        <th className="Title6">col6</th>    
        <button className="PatternButton">1</button><br></br>
        <button className="PatternButton">2</button><br></br>
        <button className="PatternButton">3</button><br></br>
        <button className="PatternButton">4</button><br></br>
        <button className="PatternButton">5</button><br></br>
        <button className="PatternButton">6</button><br></br>
        <button className="PatternButton">7</button><br></br>
        <button className="PatternButton">8</button><br></br>
    </td>
</table>

Answer 1

我想我明白您的要求。尝试将按钮包装在div中并设置边距。

https://jsfiddle.net/25wognuf/

   <style>
   .wr {
     margin: -1px -1px 10px -1px;
    padding: 0px;
   }
   </style>


<table className="ButtonTable" cellspacing="0" cellpadding="0">    
<tr>
  <td className="Col12">
    <div class="wr">
    <button className="PatternButton">1</button>
    </div>
    <div class="wr">
    <button className="PatternButton">2</button>
    </div>
</td> 
  <td className="Col12">
    <div class="wr">
    <button className="PatternButton">1</button>
    </div>
    <div class="wr">
    <button className="PatternButton">2</button>
    </div>
 </td>
</tr>                   
</table>