Как я могу устранить вертикальное пространство между рядами кнопок в таблице HTML?

Question

У меня есть div, который появляется при нажатии "PATTERNS" button. Это div содержит table из buttons (см. Pi c). Я хочу, чтобы все 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>

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>

Answer 2

Первое: ВАМ НУЖНО ПОНИМАТЬ, ЧТО ВАШЕ НЕПРАВИЛЬНО

Ошибка: Вы использовали <br>, чтобы разбить строку после каждой кнопки, создавая таким образом дополнительное пространство. Здесь: <button className="PatternButton">1</button><br></br>

Решение: Удалите разрыв строки <br> и установите display: block для своих кнопок, и они будут выстроены в виде столбца.

.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;
    /* just for illustration I've added the following */
    padding: 15px;
    display: block;  
    border: thin solid grey; 
}

<!-- Just recreated the HTML so tat I can format it on html, and not jsx -->
<table class="ButtonTable" cellspacing="0">                     
  <td class="Col12">    
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
    <button class="PatternButton">1</button>
  </td>
</table>

Answer 3

Просто измените элементы line-height из <br/>, чтобы удалить пробелы в строках ... как это:

br {
  line-height: 0;
}