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

我有一个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> 

出于某种原因,表格似乎在有很多列的时候使这一列<300px。 我基本上希望它保持这个宽度,不pipe是什么(只是增加水平滚动条)。

表里面的容器没有任何types的最大宽度,所以我不知道为什么它挤压这个列,而不是尊重这个宽度。

反正有这个,不pipe怎样,这个专栏会保持一定的宽度吗?
这里是外部容器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; } 

9 Solutions collect form web for “为什么我的HTML表格不尊重我的CSS列宽?”

如果您应用规则table-layout: fixed到表格,您可能会得到更多的运气,为表格单元格设置宽度 – 这在使用表格时帮助我解决了很多cell-sizing问题。 我不build议切换到只使用DIV来安排您的内容,如果它符合表的目的 – 显示多维数据。

我同意Hristo,但也有一些情况下需要使用表,并解决您的表问题是添加到类的表下,然后根据您的需要更改任何TD宽度。

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

我希望这有助于寻找桌面解决scheme的人!

给它max-widthmin-width属性应该工作。

我有一堆列,我想要间隔柱列相同的问题。 我曾经做:

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

但是,当桌子比窗户宽时,垫片不是真的10px,而是5px。 而在没有TABLE的情况下只使用DIV并不是我的select。 所以我试了一下:

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

它工作得很好! 🙂

设置列宽(td's)的最好方法是使用表头(th's)。 表格标题会自动设置您的td的宽度。 你只需要确保你的post里面的列与你的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; } 

在表格中使用表格布局属性和“固定”值。

 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

我遇到了无法调整table-layout: fixed列的问题table-layout: fixed使用colspan的table-layout: fixed表格。 对于任何遇到上述build议不起作用的变体的人,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> 

无法修改<td> width; 也就是列宽不可设置。 你可以添加样式white-space:nowrap; 这可能有帮助。 或者您可以添加&nbsp; 为列添加空间。

也许你可以设置列宽的HTML方式: <td width="70%">January>/td>

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

怎么样这样的事情…

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; } 
  • 我可以使用表格,tr或td的最小高度?
  • 组织Javascript库和CSS文件夹结构的最佳实践
  • Bootstrap 3 Glyphicons CDN
  • 使用Google App脚本将多个file upload到Google云端硬盘
  • 如何获得.NET(C#)中的UserControl的HTML输出?
  • 为什么“margin:auto”不是垂直居中的元素?
  • 从同一个onclick调用两个函数
  • 如何删除使用JavaScript的HTML元素?