html - 我无法设置表格列的宽度

标签 html css html-table

为了设置列的宽度,我尝试执行此处发布的解决方案: Setting table column width

像这样:

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

为什么它不起作用?

我只想要 25 个相等的列(宽度),但参数似乎没有效果....

在我的网站上,我无法滚动以访问所有列( Material 设计中的网格), 我想要屏幕上的所有表格。

最佳答案

width:100% 添加到您的输入中可以解决问题。请参阅以下链接:

input{
  width:100%;
}
<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>

关于html - 我无法设置表格列的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43255157/

相关文章:

javascript - 简单的 jQuery 分页

html - 划分底行以匹配表中的顶行 - HTML

php - 将值与其他值的总和一起列出一次

php - 在html表PHP中显示mysql数据

javascript - 如何突出显示 HTML 选择中的某些选项 - 使用 javascript

javascript - 我的所有 CSS 文件都被导入到我的 React JS 文件中,但我没有导入它们?

javascript - Onclick事件+Enter键

javascript - 如何在重定向到另一个页面之前显示加载图像?

jquery - 使用 jquery 刷新 div 溢出滚动高度?

html - css href 和链接