1. ホーム
  2. Web制作
  3. HTML/Xhtml

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のこの記事は終わりです、より関連するテーブルの設定幅の内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています!.