[解決済み】テーブルセル内のテキストを折り返さない方法
質問
テーブルのセル内のテキストが折り返されないようにする方法をご存知の方はいらっしゃいますか? これは表のヘッダー用で、ヘッダーはその下のデータよりかなり長いのですが、1行で表示させる必要があります。 列が非常に広くても大丈夫です。
私の(簡略化された)テーブルのHTMLは次のようになります。
<table>
<thead>
<tr>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
</tr>
</tbody>
</table>
見出し自体は
th
タグは、ページ上のjavascriptに関連する理由からです。
テーブルの見出しが複数行に折り返して表示されます。 これは、ブラウザが水平スクロールを避けようとしているため、テーブルが十分に広い場合にのみ発生するようです。 私の場合は、横スクロールさせたいのですが。
何かアイデアはありますか?
解決方法は?
をご覧ください。
white-space
プロパティは、このように使用します。
th {
white-space: nowrap;
}
の内容を強制的に削除します。
<th>
を1行に表示する。
リンク先のページでは、以下のように
white-space
:
通常
この値は、ユーザエージェントに一連の空白を畳み、必要に応じて改行してラインボックスを埋めるように指示します。
プリ
この値は、ユーザーエージェントが一連の空白を折りたたむことを防ぎます。行は、保存された改行文字でのみ分割されます。
ナウラップ
この値は、'normal' と同様にホワイトスペースを折りたたみますが、テキスト内の改行を抑制します。
プリラップ
この値は、ユーザーエージェントが一連の空白を折りたたむことを防ぎます。行は、保存された改行文字で分割され、行ボックスを埋めるために必要な場合もあります。
プリライン
この値は、ユーザエージェントに一連の空白を折りたたむように指示する。行は,保存された改行文字で分割され,また,行ボックスを埋めるために必要である。
関連
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] span with onclick event inside the tag
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] テーブルセルでCSSテキストオーバーフロー?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】フッターをページの下部に中央に配置するにはどうすればよいですか?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか?
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?