[解決済み] TRの高さを固定するには?
2022-10-20 04:35:54
質問
テーブルの行(tr)の高さを固定することは可能でしょうか?
ブラウザのウィンドウを縮小すると問題が現れ、一部の行が遊んでしまい、行の高さを固定することができません。
いくつかの方法を試してみました。
tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"
私はIE7を使用しています
スタイル
.tableContainer{
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
text-align:left;
}
.tableContainer tr td{
white-space:nowrap;
text-align:left;
}
HTMLコードです。
<table class="tableContainer" cellspacing="10px">
<tr style="height:15px;">
<td>NHS Number</td>
<td> </td>
<td>Date of Visit</td>
<td> </td>
<td colspan="3">Care Time Started</td>
<td> </td>
<td rowspan="2" style="text-align:right;vertical-align:bottom;">☑</td>
<td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/> care starts</td>
</tr>
<tr>
<td width="90" class="tableContainerRow2"> </td>
<td > </td>
<td width="80" class="tableContainerRow2"> </td>
<td > </td>
<td width="40" class="tableContainerRow2"> </td>
<td width="5">:</td>
<td width="40" class="tableContainerRow2"> </td>
<td > </td>
</tr>
</table>
どのように解決するのですか?
テーブルは、高さを固定し、テキストを折り返さないという点で、(少なくともIEでは)あやふやなものです。 唯一の解決策は、テキストを
div
要素の中にテキストを入れることです。
td.container > div {
width: 100%;
height: 100%;
overflow:hidden;
}
td.container {
height: 20px;
}
<table>
<tr>
<td class="container">
<div>This is a long line of text designed not to wrap
when the container becomes too small.</div>
</td>
</tr>
</table>
このように
div
の高さは含まれるセルの高さであり、テキストは
div
を大きくすることはできず、ウィンドウサイズに関係なく、セルや行の高さは同じままです。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み] テーブルの行の高さを設定する