3

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>

どうすればこれを行うことができるかについてのアイデアはありますか?

4

1 に答える 1

6

行が折り返されないようにしたい場合は、white-space:nowrap を試して、テーブルから幅を削除してください。

td {
    font-size: 12px;
    padding: 4px 7px 2px;
    vertical-align: bottom;
    border-right: 1px solid #DFDFDF;
    white-space:nowrap;
}
于 2012-11-15T21:28:12.593 に答える