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

理想情况下，我的文本不会换行（例如，当宽度设置为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>

关于我如何做到这一点的任何想法？

Answer 1

如果你试图让线条永远不会包裹，请尝试使用white-space：nowrap并从表格中删除宽度。

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

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

1 个答案: