如何调整 Bulma Table 列的宽度

Question

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

可以看到列宽不统一（比如Fri列宽小于Mon列宽）和它不应该是这样的，日历的每一天都应该有相同的宽度。下面是这个

的代码片段

<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

您可以为所有 tds 设置相同的宽度。

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>

如何调整 Bulma Table 列的宽度

How to adjust width of Bulma Table Column

html

css

html-table

bulma