Html td 宽度，不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11090544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
td widths, not working?
提问by user979331
So I have this code here:
所以我在这里有这个代码：
<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>
with the CSS
使用 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;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the tdwith the widthof 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
它工作正常，在我的浏览器，我在每一个浏览器Mac和PC的测试，但有人抱怨说，td与width200不断变化的宽度。我不知道他在说什么。有谁知道为什么他或她会看到宽度发生变化td？
回答by bfavaretto
It should be:
它应该是：
<td width="200">
or
或者
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixedfor the table.
请注意，如果您的单元格包含一些不适合 200 像素的内容（如somelongwordwithoutanyspaces），单元格仍会拉伸，除非您的 CSS 包含table-layout: fixed表格。
EDIT
编辑
As kristina childs noted on her answer, you should avoid both the widthattribute and using inline CSS (with the styleattribute). It's a good practice to separate style and structure as much as possible.
正如 kristina childs 在她的回答中指出的那样，您应该避免width使用属性和使用内联 CSS（带有style属性）。尽可能将样式和结构分开是一个很好的做法。
回答by kristina childs
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
表格中的宽度和/或高度不再是标准的；正如 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
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;
}
回答by mateostabio
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td>text. So try using media queries.
这将强制设置样式宽度<td>。如果文本过满，它将与其他<td>文本重叠。所以尝试使用媒体查询。
回答by lanzz
You can't specify units in width/heightattributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
您不能在表的width/height属性中指定单位；这些总是以像素为单位，但您根本不应该使用它们，因为它们已被弃用。
回答by Cyan Baltazar
You can try the "table-layout: fixed;" to your table
你可以试试“table-layout: fixed;” 到你的桌子
table-layout: fixed;
width: 150px;
150px or your desired width.
150px 或您想要的宽度。
Reference: https://css-tricks.com/fixing-tables-long-strings/
回答by Siddharth Shukla
You can use within <td>tag css : display:inline-block
您可以在<td>标签 css内使用：display:inline-block
Like: <td style="display:inline-block">
喜欢： <td style="display:inline-block">
回答by Med7at
try to use
尝试使用
word-wrap: break-word;
hope this help
希望这有帮助
回答by user1760527
I use
我用
<td nowrap="nowrap">to prevent wrap Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
回答by Amrit Anand
Use
用
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
它将强制表格设置为 100% 宽度。然后使用此代码
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column) to specify length to each cell
（表 id 是 dataTable 并且有 3 列）来指定每个单元格的长度
回答by Masoud HB
try this:
尝试这个：
word-break: break-all;
