多層ヘッダーの実装方法を教えるための 1 つのトリック

一个新手

リリース： 2017-09-07 13:49:58

オリジナル

1484 人が閲覧しました

個人的な作業を行っているときに、ページに多層ヘッダーを実装する必要がありました。最初は少し混乱して、実装方法がわかりませんでした。JFTT にいたとき、マルチレイヤーヘッダーの Flex バージョンを使用していたことを思い出しましたが、それはずっと前のことです。フレックスは廃止されました。そこで、インターネットでしばらく苦労した後、最終的に使いやすく、優れた効果を持つコンポーネント、Bootstrap-table を見つけました。

Bootstrap-table にも多くの強力な機能がありますが、この記事では多層テーブルのヘッダーにのみ焦点を当てます。焦点が決まれば、このブログは非常にシンプルになりますが、それでも推奨する必要があると思います。 Guangzhi - 以前、Dong Qing が主催した「詩会議」を見ていたため、多くの基礎的な知識が含まれていましたが、多くの人がそれに答えることができず、私は一時的に非常に「傲慢」になりました。妻、私も一次選考は通過できるけど、実際は合格できないんです――「ジャスパーは木のように高い木を作り、何千もの緑の絹のリボンがぶら下がっている」ダウン（タオ）」。

つまり、この記事はその難しさではなく、その重要性にあります。月で小さな一歩を踏み出すことと、地球で小さな一歩を踏み出すことの違いは、「これは個人が踏み出す小さな一歩ですが、それは人類にとっての大きな一歩です。

<html><head><title>多层表头</title><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><style type="text/css">.table td, .table th {    font-style: normal;    font-weight: normal;    text-align:center;}.bootstrap-table {    width: 100%;}</style></head><body>
    <table data-toggle="table">
        <thead>
            <tr>
                <th data-colspan="1">妻子</th>
                <th data-colspan="2">车子</th>
                <th data-colspan="3">房子</th>
                <th data-rowspan="2">总价值</th>
            </tr>
            <tr>
                <th>唯一</th>
                <th>Mini</th>
                <th>Smart</th>
                <th>90平</th>
                <th>149平</th>
                <th>别墅</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>∞</td>
                <td>30万</td>
                <td>20万</td>
                <td>60万</td>
                <td>100万</td>
                <td>看着办</td>
                <td>∞∞</td>
            </tr>
        </tbody>
    </table>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script></body></html>

ログイン後にコピー

2 番目のステップ、第 1 レベルのヘッダー;

<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

ログイン後にコピー

data-colspan で水平方向にある二次ヘッダーの数を指定し、垂直方向は 1 です。多層ヘッダーの実装方法を教えるための 1 つのトリック data-rowspan で垂直方向にある二次ヘッダーの数を指定します。水平方向は 1;

3 番目のステップ、第 2 レベルのヘッダー

<tr>
    <th data-colspan="1">妻子</th>
    <th data-colspan="2">车子</th>
    <th data-colspan="3">房子</th>
    <th data-rowspan="2">总价值</th></tr>

ログイン後にコピー

data-rowspan="2" に対応する第 2 レベルのヘッダーは指定する必要がないことに注意してください。

3 番目のステップは、ブートストラップテーブルを有効にすることです。

rreee

まあ、説明する必要はありません。

以上が多層ヘッダーの実装方法を教えるための 1 つのトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。