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的测试，但有人抱怨说，td与width200不断变化的宽度。我不知道他在说什么。有谁知道他或她为什么看到宽度的变化td？

它应该是：

<td width="200">

要么

<td style="width: 200px">

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

编辑

正如kristina childs在她的回答中指出的那样，您应避免同时使用width属性和使用内联CSS（带有style属性）。最好将样式和结构分开，这是一个好习惯。

表格中的宽度和/或高度不再是标准的；正如Ianzz所说，它们已被弃用。相反，执行此操作的最佳方法是在表格单元格中具有一个block元素，该元素将使该单元格保持所需的大小：

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

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

这将强制设置样式的宽度<td>。如果文本过多，它将与其他<td>文本重叠。因此，请尝试使用媒体查询。

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

您可以尝试“表格布局：固定”；到你的桌子

table-layout: fixed;
width: 150px;

150px或您想要的宽度。

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

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

喜欢： <td style="display:inline-block">

尝试使用

word-wrap: break-word;

希望这个帮助

试试这个：

word-break: break-all;

我用

<td nowrap="nowrap">

防止换行参考：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%' },
              ]
      });

（表ID为dataTable，并具有3列）以指定每个单元格的长度

请注意，调整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上的宽度。

我尝试了许多解决方案，但对我而言不起作用，因此我尝试对表进行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;
}

使用CSS规则min-width并max-width在CSS规则内很容易解决此问题。

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

这将强制第一列为80px宽。通常，我只使用max-width而不使用min-width来填充文本，该文本有时会因创建具有超宽列（大多数为空）的表而导致时间过长。OP的问题是关于设置为固定宽度，因此这两个规则在一起。在许多浏览器上width:80px;中，表列都将忽略CSS中的表格列。在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悬停不适用于iOS Safari和Chrome