CSS を使用してテーブル内の行と列を強調表示するにはどうすればよいですか?

列、列グループ、および行の CSS ハイライトによりインタラクティブなテーブルが強化されます

ハイテーブルは通常、複雑なデータ構成を表示するように設計されており、特定のセクションを視覚的にハイライトすることでユーザーの理解が向上します。従来、 :hover 疑似クラスは、表のセルなどの単一の要素に適用されます。ただし、CSS を使用してこの機能を拡張して要素 (列や行など) をグループ化することは可能です。

::before および ::after 疑似要素を使用する

:: を活用することで、疑似要素の前後で、選択した要素を超えて強調表示を適用できます。これらの要素は基本的に、親を基準にして配置できる仮想要素を作成します。

行と列にハイライトを適用する

行と列にハイライトを適用するには、次の手順を使用します。

• 行と行の両方に ::before および ::after 疑似要素を作成します。
• 背景色でスタイルを設定し、強調表示を示します。
• 絶対位置とオーバーフローを使用して、強調表示がセルの境界を超えて広がるようにします。
• オプションで、クラスを追加します。カスタマイズのために行と列の強調表示を区別します。

例実装

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML:

このアプローチは、柔軟でカスタマイズ可能なソリューションを提供します。表内の行と列を強調表示します。

以上がCSS を使用してテーブル内の行と列を強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。