为什么我的 HTML 表格不尊重我的 CSS 列宽？

Question

我有一个 HTML 表格，我希望前几列很长。我在 CSS 中这样做：

td.longColumn
{ 
     width: 300px;
}

这是我的表格的简化版本

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

由于某些原因，当有很多列时，该表似乎使该列

表格所在的容器没有任何类型的最大宽度，因此我无法弄清楚为什么它会向下挤压此列而不是尊重此宽度。

无论如何，无论如何，此列都会保持一定的宽度？
这是外部容器 div 的 CSS：

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}

Answer 1

无法修改<td> width;，即列宽不可设置。您可以添加样式white-space:nowrap;，这可能会有所帮助。或者您可以添加 s 为列添加空间。

也许您可以通过 HTML 方式设置 col 宽度：<td width="70%">January>/td>

很遗憾，在 HTML 4.01 及更高版本中，这种方式无效。

Answer 2

这样的事情怎么样...

http://jsfiddle.net/qabwb/1/

HTML

<div id="wrapper">
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
    <div class="row">
        <div class="column first longColumn">stuff</div>
        <div class="column longColumn">more stuff</div>
        <div class="column">foo</div>
        <div class="column">jsfiddle</div>
    </div>
</div>

CSS

#wrapper {
    min-width: 450px;
    height: auto;
    border: 1px solid lime; 
}

.row {
    padding: 4px;   
}
.column {
    border: 1px solid orange;
    border-left: none;
    padding: 4px;
    display: table-cell;
}

.first { 
    border-left: 1px solid orange;
}

.longColumn {
    min-width: 150px;
}

Answer 3

如果您将规则 table-layout: fixed 应用于表格，您可能会更幸运地为表格单元格设置宽度 - 这在使用表格时帮助我解决了很多单元格大小问题。如果它符合表格的目的 - 显示多维数据，我不建议切换到仅使用 DIV 来排列您的内容。

Answer 4

我同意 Hristo 的观点，但在某些情况下需要使用表格，解决表格问题的方法是将以下类添加到表格中，然后根据需要更改任何 td 宽度。

.tables{ border-collapse:collapse; table-layout:fixed;}

我希望这对正在寻找表格解决方案的人有所帮助！

Answer 5

我在需要间隔柱的一堆柱子上遇到了同样的问题。 我曾经这样做过：

<td style='width: 10px;'>&nbsp;</td>

但是当桌子比窗户宽时，间隔并不是真正的10px，而是5px。 在我的情况下，只使用没有 TABLE 的 DIV 不是一个选项。 所以我尝试了：

<td><div style='width: 10px;'></div></td>

而且效果很好！ :)

Answer 6

设置列宽 (td's) 的最佳方法是使用表头 (th's)。表格标题将自动设置您的 td 的宽度。你只需要确保你的thead中的列与你的tbody中的列数相同。

在这里查看： http://jsfiddle.net/tKAj8/

HTML

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>

CSS

table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }

.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }

Answer 7

同时给它max-width 和min-width 属性应该可以工作。

Answer 8

使用表格布局属性和表格上的“固定”值。

table {
    table-layout: fixed;
    width: 300px; /* your desired width */
}

设置好表格的整个宽度后， 您现在可以以 td 的 % 为单位设置宽度。

td:nth-child(1), td:nth-child(2) {
    width: 15%;
}

您可以通过以下链接了解更多信息：http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 9

我遇到了无法调整使用 colspan 的 table-layout: fixed 表中的列大小的问题。为了任何遇到上述建议不起作用的问题变体的人的利益，colgroup 为我工作（OP 代码的变体）：

div {
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
td.longColumn { 
     width: 300px;
}
table {
    border: 1px solid; 
    text-align: center;
    width: 100%;
}
td, tr {
  border: 1px solid; 
}

<div>
    <table>
        <colgroup>
            <col class='longColumn' />
            <col class='longColumn' />
            <col class='longColumn' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan="7">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>

Answer 10

对于那些有表格单元格/列宽问题并且table-layout: fixed 没有帮助的人。

对表格单元格（<td> 或 <th>）应用固定宽度时，不要为所有单元格指定宽度。应该至少有一个具有（自动）宽度的单元格。该单元格将充当表格剩余空间的填充物。

例如

<table>
  <thead>
    <tr>
      <th style="width: 150">Assigned 150 width to Table Header Cell</th>
      <th style="width: 100">Assigned 100 width to Table Header Cell</th>
      <th>No width assigned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 150">Assigned 150 width to Table Body Cell</td>
      <td style="width: 100">Assigned 100 width to Table Body Cell</td>
      <td>No width assigned</td>
    </tr>
  </tbody>
</table>

附：你可以在这里使用样式类，你不需要使用内联样式。