How can I eliminate vertical space between rows of buttons in an HTML table?

I have a div that pops up when the "PATTERNS" button is pressed. This div holds a table of buttons (see pic). I want all of the buttons to be touching however I can't seem to get rid of the row spaces in between them. I am not an experienced html table user.

My research has led me to try the following:

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

}

Is my table layout optimal here?

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