HTML-给定一个表，如何允许一列在不破坏布局的情况下保持流畅

我有以下资料：

<div style="width:100%;">

 <table>
  <tr>
    <td style="width:30px;">hi</td>
    <td style="width:40px;">hi</td>

    <td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>

    <td style="width:25px;">hi</td>
  </tr>
 </table>

</div>

你好
你好
这里有很多文字，很多
你好

我想让这个表增长到外部DIV的100%。问题是，该表内部有大量文本，ID='lotoftext'导致该表增长到比外部DIV更大的宽度，从而破坏页面

---

有什么想法吗？谢谢

你能用吗？您可能需要在特定的TD中放置一个div，并指定最大宽度，除非它是表格数据，否则您应该使用div和CSS来构建它。通过这种方式，您应该能够在不太头疼的情况下实现您想要的目标。

您所描述的场景根本不适合表格。仅当显示表格数据时才应使用表格。您应该使用其他类型的html元素来构建您的结构，并使用CSS对其进行样式设置。

为了使用DIV和CSS（使用表的替代选项）实现此布局，您可以这样处理：

CSS:

HTML:

4.
1.
2.
这里有很多文字！

#body_container

（或outter container）可以设置为任意宽度或无宽度。

.data-content\u lotsoftext

上的左边距是

.data-content\u a

和

.data-content\u b

的组合宽度（70px+1px在安全侧），而

上的右边距是
上的右边距。data-content\u lotsoftext
是数据内容的宽度（25px+1px在安全侧）

通过不为
.data-content\u lotsoftext
指定宽度，它将自动拉伸到全宽<代码>显示：内联

有助于它更好地位于ie6中

在Firefox、Chrome、IE8、IE7和IE6中进行了测试（IE6和IE7有点小故障-如果有人能帮助改进CSS，使其在IE6和IE7中完美工作，请大声说！）

希望这有帮助。

---

丹

问题在于页面不稳定。所以我不知道最大宽度。我必须使用JS，我宁愿在用尽所有CSS选项之前不使用JS。问得好，但问题是其他TD的宽度是固定的，所以这破坏了使用%How的能力？例如，Gmail使用表格来满足这一需求。你会用它做什么？举个例子，因为“不使用表格”不是解决老年退休金问题的答案，所以被否决。如果你打算建议使用div和CSS，那么花点时间向他们展示如何使用div和CSS（或者找一个网页告诉他们如何使用div和CSS）。@Sean，表示-真的吗？我没有说不要使用表格，我说除非是表格数据，否则使用div和CSS。答案可能有100万和10个，除非咨询更具体，否则他们会得到含糊不清的答案（因此我要求提供更多信息，见上文……），因为“不使用表格”不是解决老年退休金问题的答案。如果你打算建议使用div和CSS，那么花点时间向他们展示如何操作（或者找一个网页告诉他们如何操作）。肖恩，他应该如何处理的细节可能有10多种不同的方式，这取决于他真正想做什么。在不知道他具体需要什么的情况下，我可以提供html，但这可能和使用表格一样糟糕。有时，“如何处理表格”的答案是“不要处理表格，请使用divs。”尝试两件事：向表格添加width=“100%”，并使用width=“30px”而不是通过css设置td宽度。这在所有浏览器中都会发生吗？

#body_container{
    max-width:700px;
}

.data-container{
    background-color:#ccc;
    zoom:1;
}

.data-content_a{
    width:30px;
    float:left;
    background-color:#3FF;
}

.data-content_b{
    width:40px;
    float:left;
    background-color:#CF0;
}

.data-content_c{
    width:25px;
    float:right;
    background-color:#9FF;
}

.data-content_lotsoftext{
    float:left;
    background-color:#FCF;
    margin:-20px 26px 0 71px;
    clear:left;
    display:inline;
}

.clear{
    clear:both;
    padding:0;
    margin:0;
}

<div id="body_container">
    <div class="data-container">
        <div class="data-content_c">4</div>
        <div class="data-content_a">1</div>
        <div class="data-content_b">2</div>
        <div class="data-content_lotsoftext">lots of text goes here!</div>
    <div class="clear"></div>
    </div>
</div>