td宽度，不工作？答案

【问题标题】：td widths, not working?td宽度，不工作？
【发布时间】：2012-06-20 21:03:02
【问题描述】：

所以我这里有这段代码：

<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 的每个浏览器中对其进行了测试，但有人抱怨 td 和 200 的 width 不断变化宽度。我不知道他在说什么。有谁知道他或她为什么看到td 上的宽度变化？

【问题讨论】：

那么，当我们对投诉的内容一无所知时，我们该如何提供帮助呢？我们甚至无法测试真实页面，也没有关于某人及其浏览环境的信息。

标签： html css html-table width

【解决方案1】：

应该是：

<td width="200">

或

<td style="width: 200px">

请注意，如果您的单元格包含一些不适合 200 像素的内容（例如 somelongwordwithoutanyspaces），则单元格仍会拉伸，除非您的 CSS 包含表格的 table-layout: fixed。

编辑

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

【讨论】：

表应该是<table style="table-layout:fixed;">
@user1193385，是的，就是这样。但尽可能避免使用内联 CSS。
内联 css 是一个坏主意，除非你真的只需要在一个地方。此外，td 宽度已经贬值了一段时间。见下方答案
@kristinachilds 我同意。我在我的示例中使用了内联 css，因此我不需要将 HTML 和 CSS 分成两个代码块。在上面添加了一条评论，告诉 OP 避免使用内联 CSS。关于 width 属性，从技术上讲它并没有被弃用（因为 HTML5 规范仍然是一个工作草案），但你是对的，应该避免它。我将编辑我的答案并附上相关说明。
在这方面问题中代码中语法的形式错误对我所知道的任何浏览器的功能都没有影响。如果您想要严格的布局，设置table-layout: fixed 是相关的，但浏览器可能仍会偏离设置的宽度。

【解决方案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;
}

【讨论】：

不幸的是，电子邮件技术落后于当前的 HTML 规范很多年，在这种情况下，表格和内联 css 很遗憾是不可避免的。
没有人谈论 html 电子邮件，这是用于基本的桌面网页浏览。但是，是的，对于电子邮件，表格和内联 CSS 是构建它们的唯一方法。谢谢，微软...
我只提出电子邮件，因为这就是我来到这里的原因；我在使用电子邮件时遇到了同样的问题。

【解决方案3】：

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

这将强制设置样式宽度<td>。如果文本填满它，它将与其他 <td> 文本重叠。所以尝试使用媒体查询。

【讨论】：

在我的情况下（Firefox 70.0），table-layout:fixed 为列分配了固定宽度，所以我不能再更改width（使用 jquery）。
你拯救了我的一天！

【解决方案4】：

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

【讨论】：

【解决方案5】：

你可以试试“table-layout:fixed;”到你的桌子上

table-layout: fixed;
width: 150px;

150px 或您想要的宽度。

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

【讨论】：

【解决方案6】：

你可以在<td>标签内使用css：display:inline-block

点赞：<td style="display:inline-block">

【讨论】：

这是唯一适合我的答案，但我无法解释。

【解决方案7】：

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

HTML

<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;，然后应用悬停规则删除宽度和 nowrap 规则，以便用户在鼠标悬停时可以看到完整的内容。像这样的：

CSS

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

这完全取决于您要达到的目标。我希望这可以帮助别人。 PS 顺便说一句，对于 iOS，有一个解决悬停不起作用的问题 - 请参阅 CSS Hover Not Working on iOS Safari and Chrome

【讨论】：

【解决方案8】：

试试这个：

word-break: break-all;

【讨论】：

【解决方案9】：

尝试使用

word-wrap: break-word;

希望有帮助

【讨论】：

【解决方案10】：

我用

&lt;td nowrap="nowrap"&gt;

防止换行参考：https://www.w3schools.com/tags/att_td_nowrap.asp

【讨论】：

" 的 nowrap 属性在 HTML5 中不受支持，请改用 CSS。"

【解决方案11】：

注意在thead中调整一列的宽度会影响整个表格

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

在我的例子中，thead > tr 上的宽度直接覆盖了 table > tr > td 上的宽度。

【讨论】：

【解决方案12】：

我尝试了很多解决方案，但它对我不起作用，所以我尝试使用 flex 与表格，它对我来说很好，适用于所有表格功能，如边框折叠等等，唯一的变化是显示属性

这是我的 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>

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

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

使用

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

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

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

（表 id 是 dataTable 并且有 3 列）指定每个单元格的长度

【讨论】：