Td 宽度，不工作？

它应该是:

<td width="200">

or

<td style="width: 200px">

请注意，如果您的单元格包含一些不适合200px 的内容(如 somelongwordwithoutanyspaces) ，那么单元格仍然会伸展，除非您的 CSS 包含表的 table-layout: fixed。

剪辑

正如 Kristina Childs 在她的回答中指出的那样，您应该避免使用 width属性和内联 CSS (使用 style属性)。尽可能地将样式和结构分开是一种很好的做法。

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

表中的宽度和/或高度不再是标准的; 正如 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;
}

尝试使用

word-wrap: break-word;

希望这个能帮上忙

Note that adjusting the width of a column in the thead will affect the whole table

<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe@email.com</td>
</tr>
</table>

在我的示例中，head > tr 的宽度直接覆盖 table > tr > td 的宽度。

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

这将强制样式化宽度 <td>。如果文本超出了它，它将与其他 <td>文本重叠。因此，尝试使用媒体查询。

试试这个:

word-break: break-all;

您可以尝试在表中使用“ table-layation: fix;”

table-layout: fixed;
width: 150px;

150px 或您想要的宽度。

参考文献: Https://css-tricks.com/fixing-tables-long-strings/

可以在 <td>标记 css: display:inline-block中使用

比如: <td style="display:inline-block">

I use

<td nowrap="nowrap">

to prevent wrap Reference: https://www.w3schools.com/tags/att_td_nowrap.asp

使用

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

它将强制表设置为100% 的宽度。然后使用此代码

$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});

(table id is dataTable and having 3 column) 指定每个单元格的长度

I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property

这是我的 HTML 需求

<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>

My CSS

table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}

在 css 规则中使用 min-width和 max-width很容易解决这个问题。

超文本标示语言

<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>

CSS

.name {
max-width: 80px;
min-width: 80px;
}

这将迫使第一列的宽度为80像素。通常，我只使用 max-width 而不使用 min-width 来控制文本，这样很偶尔会因为创建一个超宽列(大部分为空)而导致文本太长。OP 的问题是关于设置一个固定的宽度，因此这两个规则是一起的。在许多浏览器中，对于表列，CSS 中的 width:80px;被忽略。在 HTML 中设置宽度确实有用，但不是您应该采用的方式。

我建议使用最小和最大宽度规则，不要设置它们相同，而是设置一个范围。通过这种方式，表可以完成它的任务，但是您可以给它一些关于如何处理过长内容的提示。

如果我想保持文本不包装和增加行的高度-但仍然可以让用户看到全文，我使用 white-space: nowrap;的主规则，然后应用一个悬停规则，删除宽度和 norap 规则，以便用户可以看到全部内容时，他们的鼠标在它上面。 就像这样:

CSS

.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}

It just depends on exactly what you are trying to achieve. I hope this helps someone. PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome

如果您没有设置表有 table-layout: fixed和一个确定的 宽度，那么表单元格将超出自己的宽度，如果内容更宽。这就是他/她抱怨的。