我无法设置表格列的宽度

Question

为了设置列的宽度，我尝试在此处发布解决方案： Setting table column width

像这样：

＆＃13;

＆＃13;

<table>
  <colgroup>
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
  </colgroup>
  <tr>
    <th></th>
    <th>0h-1h</th>
    <th>1h-2h</th>
    <th>2h-3h</th>
    <th>3h-4h</th>
    <th>4h-5h</th>
    <th>5h-6h</th>
    <th>6h-7h</th>
    <th>7h-8h</th>
    <th>8h-9h</th>
    <th>9h-10h</th>
    <th>10h-11h</th>
    <th>11h-12h</th>
    <th>12h-13h</th>
    <th>13h-14h</th>
    <th>14h-15h</th>
    <th>15h-16h</th>
    <th>16h-17h</th>
    <th>17h-18h</th>
    <th>18h-19h</th>
    <th>19h-20h</th>
    <th>20h-21h</th>
    <th>21h-22h</th>
    <th>22h-23h</th>
    <th>23h-0h</th>
    <tr>
      <tr>
        <th>Lundi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Mardi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Mercredi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Jeudi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Vendredi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Samedi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Dimanche</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

为什么它不起作用？

我只想要25个等于列（宽度），但参数似乎没有效果....

在我的网站上，我无法滚动以访问所有列（材质设计中的网格）， 我希望所有的桌子都在屏幕上。

Answer 1

在输入中添加width:100%可解决问题。见以下链接：

＆＃13;

＆＃13;

input{
  width:100%;
}

＆＃13;

<table>
  <colgroup>
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
    <col span="1" style="width: 4%;">
  </colgroup>
  <tr>
    <th></th>
    <th>0h-1h</th>
    <th>1h-2h</th>
    <th>2h-3h</th>
    <th>3h-4h</th>
    <th>4h-5h</th>
    <th>5h-6h</th>
    <th>6h-7h</th>
    <th>7h-8h</th>
    <th>8h-9h</th>
    <th>9h-10h</th>
    <th>10h-11h</th>
    <th>11h-12h</th>
    <th>12h-13h</th>
    <th>13h-14h</th>
    <th>14h-15h</th>
    <th>15h-16h</th>
    <th>16h-17h</th>
    <th>17h-18h</th>
    <th>18h-19h</th>
    <th>19h-20h</th>
    <th>20h-21h</th>
    <th>21h-22h</th>
    <th>22h-23h</th>
    <th>23h-0h</th>
      <tr>
        <th>Lundi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Mardi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Mercredi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Jeudi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Vendredi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Samedi</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
      <tr>
        <th>Dimanche</th>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
        <td><input type="number" min="1" step="1"></td>
      </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据div的大小在表格中设置特定宽度。

添加样式如下

  <table style="width:350px; overflow-x:scroll;">

  //.... 
  </table>

Answer 3

更改

<col span="1" style="width: 4%;">

到

<col width="4%">

它会起作用