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

Answer 1

它应该是:

<td width="200">

要么

<td style="width: 200px">

请注意,如果您的单元格包含一些不适合200px的内容(例如somelongwordwithoutanyspaces),则单元格将延伸,除非您的CSS包含table-layout: fixed该表格.

编辑

正如克里斯蒂娜的孩子们在她的回答中指出的那样,你应该避免width使用属性并使用内联CSS(带有style属性).尽可能将风格和结构分开是一种很好的做法.

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

Answer 3

min-width使用max-widthcss 规则很容易解决这个问题。

超文本标记语言

<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 像素。通常，我只使用最大宽度而不使用最小宽度来控制文本，这些文本偶尔会因创建一个具有大部分为空的超宽列的表而太长。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 上不起作用

Answer 4

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

这将强制样式宽度<td>.如果文本溢出它,它将与其他<td>文本重叠.所以尝试使用媒体查询.

Answer 5

您不能在表的width/ height属性中指定单位; 这些总是以像素为单位,但您不应该使用它们,因为它们已被弃用.

Answer 6

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

table-layout: fixed;
width: 150px;

150px或您想要的宽度。

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

Answer 7

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

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