How to adjust width of Bulma Table Column

Question

I am trying to create a calendar using Bulma table, everything is working properly except one problem. My calendar looks like below

You can see that the column widths are not uniform (for example, Fri column width is smaller than Mon column width) and it should not be like this, everyday of the calendar should have same width. Below is the code snippet for this

<table class="table is-bordered">
        <thead>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>
        </tbody>
      </table>

I am not sure about how to solve this, using CSS or any other better way. I would really appreciate if you could point me in the right direction.

Answer 1

You can give all tds an equal width.

table, td, th {
  border: 1px solid #DDD;
  text-align:center;
  width:14.2%;
  padding:5px;
}
th
{
   background:#DDEEEE;
}
table {
  width: 400px;
  border-collapse: collapse;
}

<table class="table is-bordered">
        <thead>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>
        </tbody>
</table>