<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container my-5"> <div class="row"> <div class="col-4"> <table class="table table-sm table-bordered table-striped"> <thead> <tr> <th colspan="7"> <span class="text-center d-flex align-items-center justify-content-between"> <a class="btn btn-outline-light"><</a> <a class="">February 2012</a> <a class="btn btn-outline-light">></a> </span> </th> </tr> <tr class="text-center"> <th>Su</th> <th>Mo</th> <th>Tu</th> <th>We</th> <th>Th</th> <th>Fr</th> <th>Sa</th> </tr> </thead> <tbody class="text-right"> <tr> <td class="text-muted">29</td> <td class="text-muted">30</td> <td class="text-muted">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td class="bg-primary text-white font-weight-bold">20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td class="text-muted">1</td> <td class="text-muted">2</td> <td class="text-muted">3</td> </tr> </tbody> </table> </div> </div> </div>

th, td { width: 40px !important; }