TD宽度，不工作？

所以我在这里有这个代码：

<table> <tr> <td width="200px" valign="top"> <div class="left_menu"> <div class="menu_item"> <a href="#">Home</a> </div> </div> </td> <td width="1000px" valign="top">Content</td> </tr> </table> 

与CSS

 .left_menu { background: none repeat scroll 0 0 #333333; border-radius: 5px 5px 5px 5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; padding: 5px; } .menu_item { background: none repeat scroll 0 0 #CCCCCC; border-bottom: 1px solid #999999; border-radius: 5px 5px 5px 5px; border-top: 1px solid #FFFFCC; cursor: pointer; padding: 5px; } 

它在我的浏览器上正常工作，我已经在Mac和PC的每个浏览器中进行了testing，但有人抱怨width为200的td不断变化。 我不知道他在说什么。 有谁知道为什么他或她看到td的宽度变化？

Answer 1

它应该是：

 <td width="200"> 

要么

 <td style="width: 200px"> 

请注意，如果你的单元格包含一些不适合200px的内容（比如somelongwordwithoutanyspaces ），那么单元格将会拉伸，除非你的CSS包含table-layout: fixed对于表格是table-layout: fixed的。

编辑

正如kristina孩子在她的回答中指出的那样，你应该避免使用width属性和使用内联CSS（使用style属性）。 尽可能分离风格和结构是一个很好的做法。

Answer 2

宽度和/或表中的高度不是标准了， 正如Ianzz所说，他们已经被弃用了。 相反，最好的办法是在你的表格单元格中有一个块元素，它将把单元格打开到你想要的大小：

 <table> <tr> <td valign="top"> <div class="left_menu"> <div class="menu_item"> <a href="#">Home</a> </div> </div> </td> <td valign="top" class="content">Content</td> </tr> </table> 

CSS

 .content { width: 1000px; } .left_menu { background: none repeat scroll 0 0 #333333; border-radius: 5px 5px 5px 5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; padding: 5px; width: 200px; } .menu_item { background: none repeat scroll 0 0 #CCCCCC; border-bottom: 1px solid #999999; border-radius: 5px 5px 5px 5px; border-top: 1px solid #FFFFCC; cursor: pointer; padding: 5px; } 

Answer 3

  <table style="table-layout:fixed;"> 

这将强制样式宽度<td> 。 如果文字过满，则会与其他文字重叠。 所以请尝试使用媒体查询。

Answer 4

您不能在表格的width / height属性中指定单位; 这些总是以像素为单位，但不应该使用它们，因为它们已被弃用。

Answer 5

尝试使用

 word-wrap: break-word; 

希望这个帮助

Answer 6

你可以试试“table-layout：fixed” 到你的桌子

 table-layout: fixed; width: 150px; 

150px或你想要的宽度。

参考： https ： //css-tricks.com/fixing-tables-long-strings/

Answer 7

请注意，调整thead中列的宽度将影响整个表格

 <table> <thead> <tr width="25"> <th>Name</th> <th>Email</th> </tr> </thead> <tr> <td>Joe</td> <td>[e-mail]</td> </tr> </table> 

在我的情况下，thead> tr上的宽度直接覆盖表> tr> td上的宽度。

Answer 8

尝试这个：

 word-break: break-all;