html - td宽度，不工作？

Question

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

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

score 138 · Accepted Answer

它应该是：

<td width="200">

或者

<td style="width: 200px">

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

编辑

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

score 33 · Accepted Answer

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

score 32 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 7 · Accepted Answer

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

table-layout: fixed;
width: 150px;

150px 或您想要的宽度。

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

score 7 · Accepted Answer

7

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

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

于 2018-07-21T08:02:44.117 回答

score 6 · Accepted Answer

这个问题很容易使用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 的问题是关于设置为固定宽度，因此这两个规则在一起。在 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

score 3 · Accepted Answer

3

试试这个：

word-break: break-all;

于 2016-11-23T09:04:05.637 回答

score 2 · Accepted Answer

2

尝试使用

word-wrap: break-word;

希望这有帮助

于 2012-12-30T17:39:27.103 回答

score 1 · Accepted Answer

我用

<td nowrap="nowrap">

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

score 0 · Accepted Answer

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

<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 上的宽度。

score 0 · Accepted Answer

我尝试了许多解决方案，但它对我不起作用，所以我尝试使用 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;
}

score 0 · Accepted Answer

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

score -1 · Accepted Answer

采用

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

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

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

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

html - td宽度，不工作？

14 回答 14

Related

Reference