我无法设置表格列的宽度

【问题标题】：I can't set the width of the columns of my table我无法设置表格列的宽度
【发布时间】：2017-09-01 11:35:09
【问题描述】：

为了设置列的宽度，我尝试执行此处发布的解决方案： 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个等于列（宽度），但参数似乎没有效果......

在我的网站上，我无法滚动以访问所有列（材料设计中的网格）， 我想要屏幕中的所有表格。

【问题讨论】：

  • 你在css中设置table {table-layout: fixed}了吗？
  • style.css 文件中没有这样的内容。它是表的默认参数吗？
  • 不，这不是默认设置，这是您需要让它工作的东西
  • 我添加了它，没有任何改变。
  • 是的，它是 html5（参见 ）

标签： html css html-table


【解决方案1】：

在您的输入中添加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>

【讨论】：

    【解决方案2】：

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

    添加如下样式

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

  //.... 
  </table>

    【讨论】：

      【解决方案3】：

      改变

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

      到

      <col width="4%">

      会有用的

      【讨论】：

        猜你喜欢
        • 2012-01-07
        • 2015-10-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-01-16
        • 1970-01-01
        • 2010-10-30
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode