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

【问题标题】：How to adjust width of Bulma Table Column如何调整布尔玛表格列的宽度
【发布时间】：2021-02-21 10:17:18
【问题描述】：

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

可以看到列宽不统一（例如Fri列宽小于Mon列宽）不应该这样，每天日历的宽度应该相同。下面是这个的代码sn-p

<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 或任何其他更好的方法来解决这个问题。如果您能指出正确的方向，我将不胜感激。

【问题讨论】：

标签： html css html-table bulma

【解决方案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>

【讨论】：