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>

由于某种原因，该表似乎使该列＆lt;当有很多列时300px。我基本上希望它保持宽度，无论如何（只是增加水平滚动条）。

桌子所在的容器没有任何类型的最大宽度，所以我无法弄清楚为什么它会向下挤压这根柱子而不是尊重这个宽度。

无论如何都在这周围，无论如何，这个柱子会保持一定的宽度吗？这是外部容器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

如果将规则table-layout: fixed应用于表格，那么为表格单元格设置宽度可能会更加幸运 - 这在使用表格时帮助我解决了很多cell-sizing问题。如果符合表格的目的，我建议不要只使用DIV来安排你的内容 - 显示多维数据。

Answer 2

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

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

我希望这对寻找桌面解决方案的人有帮助！

Answer 3

同时提供max-width和min-width属性应该有效。

Answer 4

我在一堆列中遇到了间隔物列的问题。我以前做过：

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

但是当桌子宽于窗口时，垫片不是10px，而是5px。在我的情况下，仅使用没有TABLE的DIV不是一个选项。所以我试过了：

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

它运作良好！：）

Answer 5

设置列宽（td）的最佳方法是使用表头（th）。表格标题将自动设置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 6

在表格中使用table-layout属性和“fixed”值。

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 7

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

对于那些存在表格单元格/列宽度问题并且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>

P.S。您可以在此处使用样式类，而无需使用嵌入式样式。

Answer 9

无法修改<td> width;，即列宽不可设置。您可以添加可能有用的样式white-space:nowrap;。或者您可以添加 以向列添加空间。

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

不幸的是，在HTML 4.01及更高版本中，这种方式无效。

Answer 10

这样的事情怎么样......

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

为什么我的HTML表格不符合我的CSS列宽？

10 个答案: