使HTML表格宽度足够以适应内容。

Question

使HTML表格宽度足够以适应内容。

5

我运行了一个脚本，生成了一个HTML页面，但是无法正确地格式化生成的表格。需要制作一个宽度尽可能扩展的表格。目前，我必须指定特定的宽度（1500像素），以使每个单元格的内容不换到下一行。以下是一个示例：

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                |
+-------------------+--------------------+

理想情况下，文本不会换行（例如当宽度设置为1500px时），但不必设置静态表格宽度。有时，表格可能需要比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>

你有任何想法可以帮助我完成这个任务吗？

- EGr

尝试在你的CSS中添加html，body{ width: 100%;}。如果你的body没有宽度，这并不奇怪。同时确保你已经声明了文档类型。 - Travis Pessetto

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MikeSmithDev · Accepted Answer

如果您想让文本不换行，可以尝试使用white-space:nowrap，并将表格宽度清除。

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