如何调整布尔玛表列的宽度

Question

我正在尝试使用 Bulma 表创建日历，除了一个问题之外，一切正常。我的日历如下所示

您可以看到列宽不均匀（例如，周五的列宽小于周一的列宽），并且不应该是这样，日历的每一天都应该具有相同的宽度。下面是这个的代码片段

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

我不确定如何使用 CSS 或任何其他更好的方法来解决这个问题。如果您能为我指明正确的方向，我将不胜感激。

Answer 1

您可以为所有 td 指定相同的宽度。

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>