html - 使 HTML 表格足够宽以适应内容

Question

我运行了一个生成 HTML 页面的脚本，但我无法正确设置生成的表格的格式。需要制作一张尽可能宽的表格。目前，我必须指定一个特定的宽度 (1500px)，这样每个单元格的内容就不会换行到下一行。这是一个例子:

With width set to 1500px:
+-----------------------------+------------------------------+
|Contents of my cell          | Contents of other cell       |
+-----------------------------+------------------------------+

With width set to 100%:
+-------------------+--------------------+
|Contents of my     |Contents of other   |
|cell               |cell                |
+-------------------+--------------------+

理想情况下，我的文本不会换行(例如，当宽度设置为 1500 像素时)，但不必设置静态表格宽度。有时，表格可能需要比 1500 更宽(或更小)，因此我希望宽度尽可能动态。

这是我目前使用的 CSS:

<style type="text/css">
h1 {
    text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
    font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
    font-weight: normal;
    padding: 7px 7px 8px;
    text-align: left;
    line-height: 1.3em;
    font-size: 24px;
}
table {
    border: 1px solid #DFDFDF;
    background-color: #F9F9F9;-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
    color: #333;
    width: 1500px;
}
th {
    text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
    font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
    font-weight: normal;
    padding: 7px 7px 8px;
    text-align: left;
    line-height: 1.3em;
    font-size: 14px;
    color: #555;
}
td {
    font-size: 12px;
    padding: 4px 7px 2px;
    vertical-align: bottom;
    border-right: 1px solid #DFDFDF;
}
</style>

关于如何做到这一点有什么想法吗？

Answer 1

如果你想让它永远不会换行，试试 white-space:nowrap 并降低表格的宽度。

td {
    font-size: 12px;
    padding: 4px 7px 2px;
    vertical-align: bottom;
    border-right: 1px solid #DFDFDF;
    white-space:nowrap;
}