HTMLは無効なテーブル幅設定の問題を解決します

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていることがわかった場合、結合されていない他の行の列幅が平均化され、列幅の設定が無効になります。

解決:

tbodyの前に追加

        <col style="width: 100px;"/>
        <列>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
。詳細 {
    パディング下部: 50px;
    上マージン: 80px;
}

.詳細表{
    table-layout:fixed;/*列幅はテーブル幅と列幅によって設定されます。 */
    margin: auto;/*テーブルを中央に配置*/
    テキスト配置: 中央;
    境界線: 1px 実線 #804040;
    境界線の折りたたみ: 折りたたみ;
}

.detail_table th {
    パディング: 26px;
}

.詳細テーブル td {
    境界線: 1px 実線 #804040;
    パディング上部: 16px;
    パディング下部: 16px;
}

。特別 {
    テキスト配置: 左;
    左パディング: 20px;
}

<div class="詳細">

    <テーブルクラス="詳細テーブル">

        <頭>
        <th colspan="5">選択したオプションの詳細</th>
        </thead>
        <!-- 記述した場合は、記述した幅に従いますが、記述した幅がテーブルを埋め尽くさない場合は、指定したサイズの割合に従って各 td に均等に分割されます -->
        <!--これで 4 つの列は 100 ピクセルになり、データのない列が残りのすべてを占めます -->
        <col style="width: 100px;"/>
        <列>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>

        <t本文>

        <tr>
            <td>
                シリアルナンバー
            <td>
                症状
            <td>
                準拠する
            <td>
                準拠していません</td>
            <td>
                不明
        </tr>

        <?php $i = 1; ?>

        <?php foreach ($test を $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>

    </テーブル>

</div>

これで、HTML の無効なテーブル幅設定の問題を解決する方法についての記事は終了です。無効なテーブル幅設定に関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する

>>:  CSS3でハートを描く

推薦する

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

CSS3はリストの無限スクロール/カルーセル効果を実現します

効果プレビューアイデア現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。問題1....

WeChat アプレット計算機の例

この記事では、参考までに、計算機を実装するためのWeChatアプレットの具体的なコードを紹介します。...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

列名を知らなくてもMySQLインジェクションを詳細に解説

序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...

プロファイルを使用して遅い SQL を分析する MySQL の詳細な説明 (グループ左結合はサブクエリよりも効率的です)

プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...

vue-routerフック関数はルーティングガードを実装します

目次概要グローバルフック関数ルーティング固有のフック関数コンポーネント内のフック関数概要ルートガード...

Docker で Redis クラスターを素早く構築する方法の例

Redis クラスターとはRedis クラスターは、R​​edis が提供する分散データベース ソリ...

Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法

ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...

Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法

昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

MySQL インデックスの左端原則のサンプルコード

序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...