htmlはテーブルの幅が無効な問題を解決する
2022-01-07 04:50:58
テーブルにtable-layer:fixedスタイルを設定し、テーブル内の1行がマージされていることが判明した場合、マージされていない他の行の列幅が平均化され、列幅の設定が無効となります。
回避策
tbodyの前に
<col style="width: 100px;"/>
<col>
<col style="width: 100px;"/>
<col style="width: 100px;"/>
<col style="width: 100px;"/>
.detail {
padding-bottom: 50px;
margin-top: 80px;
}
.detail_table {
table-layout:fixed;/* The column width is set by the table width and column width. */
margin: auto;/*table centered*/
text-align: center;
border: 1px solid #804040;
border-collapse: collapse;
}
.detail_table th {
padding: 26px;;
}
.detail_table td {
border: 1px solid #804040;
padding-top: 16px;
padding-bottom: 16px;
}
.special {
text-align: left;
padding-left: 20px;
}
<div class="detail">
<table class="detail_table">
<thead>
<th colspan="5">Selected options breakdown</th>
</thead>
<! --write it according to the width you write, but if you write a width that does not occupy the table it will be divided equally to each td in proportion to the size you give it-->
<! -- Now write it so that the four columns are 100px, and the one that doesn't give the data accounts for all the rest -- >
<col style="width: 100px;"/>
<col>
<col style="width: 100px;"/>
<col style="width: 100px;"/>
<col style="width: 100px;"/>
<tbody>
<tr>
<td>
Serial number
</td>
<td>
Symptom
</td>
<td>
Consistent with
</td>
<td>
Does not meet
</td>
<td>
Uncertain
</td>
</tr>
<?php $i = 1; ? >
<?php foreach ($test as $item): ? >
<! --get selection item-->
<?php $temp = $this->session->userdata('b' . $i) ? >
<tr>
<td>
<?php echo $i; ? >
</td>
<td>
<?php echo $item; ? >
</td>
<td>
<?php if ($temp == 1): ? >√<?php endif ? >
</td>
<td>
<?php if ($temp == 2): ? >√<?php endif ? >
</td>
<td>
<?php if ($temp == 3): ? >√<?php endif ? >
</td>
</tr>
<?php $i++; ? >
<?php endforeach; ? >
</tbody>
</table>
</div>
これは、無効なテーブルの設定幅の問題を解決するためのhtmlのこの記事は終わりです、より関連するテーブルの設定幅の内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています!.
関連
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
詳細 HTMLフォントはline-heightを使用して、まだ垂直方向の中央に配置することができません解決策
-
htmlのボタン自体を中央寄せにする方法
-
HTMLデータ投稿_Power Node Java Academy仕上げ
-
htmlページジャンプのパラメータ渡しの問題
-
HTMLのmetaタグのよくある使い方集
-
HTMLコードの書き方に関するいくつかの提案のまとめ
-
htmlタグのネストルールの紹介
-
HTMLの使用は、制限されたipの投票サイト不正プログラムを達成するために
-
フラッシュプラグインを使用してPCカメラを呼び出す方法TMLページに埋め込む方法
-
HTMLコードのスペースと空白行について簡単に紹介します。