[解決済み] CSSテーブルカラム自動幅
2022-09-17 23:39:40
質問
次のような場合、最後の列をコンテンツに合わせて自動サイズ調整するにはどうしたらよいでしょうか。 (最後の列は、コンテンツに自動サイズ幅を指定する必要があります。私は1つだけのli要素を持っているとすると、それは3つのli要素を持っているなどよりも縮小する必要があります)。
<table cellspacing="0" cellpadding="0" border="0">
<thead><!-- universal table heading -->
<tr>
<td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
<td class="tc">Type</td>
<th>File</th>
<th>Sample</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td>Division 5</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
<td>Division 4</td>
<td class="last">
<ul class="actions">
<li><a class="iconStats" href="#">Statystyki</a></li>
<li><a class="iconEdit" href="#">Edytuj</a></li>
<li><a class="iconDelete" href="#">Usuń</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
Cssです。
table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}
どのように解決するのですか?
以下の方法で解決します。
td.last {
width: 1px;
white-space: nowrap;
}
柔軟なクラス単位のソリューション
また、より柔軟な解決策としては
.fitwidth
クラスを作成し、その内容を1行に収まるようにしたい列に適用することです。
td.fitwidth {
width: 1px;
white-space: nowrap;
}
そして、HTMLの中に
<tr>
<td class="fitwidth">ID</td>
<td>Description</td>
<td class="fitwidth">Status</td>
<td>Notes</td>
</tr>
関連
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] 横型リストアイテム
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み】HTML5入力のプレースホルダの色を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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み] label要素の中にinput要素を入れるべきですか?
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み] セル幅をコンテンツに合わせる