时间戳

首页 > 解决方案 > 如何消除 HTML 表格中按钮行之间的垂直空间？

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

问题描述

当按下“PATTERNS”时，我会div弹出一个button。这div拥有一个table（buttons见图）。我希望所有这些都buttons令人感动，但是我似乎无法摆脱它们之间的行空间。我不是一个有经验的html table用户。

在此处输入图像描述

我的研究使我尝试了以下方法，我的table布局在这里是最优的吗？：

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

标签： htmlcss

解决方案

我想我明白你在问什么。尝试将按钮包装在 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>

推荐阅读