Question

所以我的表有近100列。我的问题是我无法设置第一列的宽度，除非我删除了一些列或删除<TH></TH>标记内的所有标题文本，这显然不是解决方案

表格宽度受容器宽度的限制。无论如何要在一个非常宽的表中指定第一列的宽度吗？

我已尝试style="width:200px !important"加入TH和TD代码，但它不起作用

由于

更新

这里是一个jsFiddle - http://jsfiddle.net/16p66fxu/

Answer 1

默认情况下，在具有大量内容的表中指定精确宽度将永远不会“正确”，因为您只提供默认表格大小调整算法的提示。如果您想要在所有单元格的宽度上获得精确的功率，只需禁用智能大小调整：

table {
  table-layout:fixed;
}

文档：

表和列宽度由table和col的宽度设置   元素或第一行单元格的宽度。细胞在   后续行不会影响列宽。

在“固定”布局方法下，整个表格可以渲染一次   已下载并分析第一个表行。这可以加快速度   渲染时间超过“自动”布局方法，但随后   单元格内容可能不适合所提供的列宽。任何细胞   溢出的内容使用溢出属性来确定   是否剪辑溢出内容。

只要它的默认值为auto，您可以做的最好就是提供浏览器自动调整大小的提示。

Read more on table-layout here

Answer 2

table { table-layout: fixed; width:100%; } 并且您需要使用min-width:500px样式而不是width样式。 DEMO

Answer 3

这个问题很复杂但可以解决。正如@Hamix所写，应该使用min-width而不是width。但是不需要设置table{width:100%;}，实际上使用宽表会破坏布局，因为应该允许表格比浏览器窗口宽，带有水平滚动条。此外，如果表格宽度为100％，width工作正常。问题是超大表width对表元素不起作用。

正如@Niels_Keurentjes所写，表格的第一行确定了列宽布局。我无法使用<col>标记来明确设置列宽。但另一种方法是使用较长的列标题名称来强制使用更宽的列，例如使用下划线，但这通常是一个丑陋的黑客。

另一种方法是将列标题放在div中，如：<th><div>Abcdef</div></th>，并使用width:150px在css（或内联）中设置div样式。

以下是我尝试完成此操作的示例文件：

t.css：

.longtext{
min-width:150px;
}

table{
  /*width: 100%;*/
  table-layout: fixed;
  border-collapse: collapse;
}

table,th,td{
  border: 1px solid black;
}

sampletable.html：

<html>
    <head>
        <link href="t.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <table>
            <colgroup>
                <col></col>
                <col></col>
                <col></col>
                <col style="width: 200px; background-color:yellow;"></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
                <col></col>
            </colgroup>
            <tr>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th  class="longtext"><div class="longtextxx">Saying</div></th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
                <th>ColumnHeader</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>Shoot first, ask questions later</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
        </table>
    </body>
</html>

无法在宽表中的列上设置宽度

3 个答案: