데이터 테이블의 모양 조정(행 높이, 색상 등)

이 문장의 총결

DataTable에 스타일 지정을 덮어 모양을 조정합니다.첫 투고라 읽기 어렵고 Qiita의 규범 등 따라야 할 습관을 지키지 않으면 지적해 주세요.
여기서부터 ↓

종점은 여기↓.

본문

DataTable

DataTable는 jQuery의plug-in으로 표<table>의 데이터 격자를 잘 표시합니다.json을 데이터 원본으로 사용할 수 있는 것 외에 외관에 관해서는 표준적인 DataTables 스타일 적용 외에 Bootstrap과 jQuery UI를 적용할 수 있는 것도 축소하고 정렬할 수 있으며 바삭바삭한 동작, 이른바'쉽게 완성하면 느낌이 좋다'는 것을 사용할 수 있습니다.
사용 방법과 개요에 관해서는 여기과여기의 보도에서 배웠습니다.

하고 싶은 일

몇 가지 스타일의 응용 방법을 준비했지만 열 너비 같은 것은 열에 따라 지정하는 방법이 있지만 책상 전체의 구조에 관해서는 DataTables에서 임의로 줄의 높이와 색깔을 결정하기 때문에 아직 자신의 인상에 따라 디자인할 수 없다Option에서 말하는 레이아웃 계열의 지정은 거의 없습니다. 변경하려면 스타일을 덮어쓰고 조정할 수밖에 없습니다.

표준적으로 이런 느낌이에요.

변경하고 싶은 포인트

이번에는 이 줄의 높이와 색을 변경해야 한다.
구체적으로 말하자면 한 줄의 높이가 너무 높기 때문에 나는 약간 축소하는 동시에 홀수 줄과 짝수 줄의 색깔을 바꾸어 시각적 식별성을 높이고 싶다.

방법

ID ID를 사용하여 지정된 스타일을 덮어씁니다.DataTables를 다운로드할 때 지정한 스타일이 표준 DataTables 스타일인지 jQueryUI 또는 Bootstrap 스타일인지에 따라 기술 내용을 약간 변경해야 하는 부분도 있습니다. 이번에는 DataTables 표준 스타일을 기술하겠습니다.

대상 html

대상표를 <table id="table1"> 로 표시하는 데이터는 json 파일을 적절하게 가져와야 합니다.또한 DataTables 버전은 1.10.16 입니다.
table1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>DataTablesのテスト</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

    <link rel="stylesheet" type="text/css" href="./s2.css"/>
    <script>
        $(function(){
            //表示言語を日本語にする
            $.extend($.fn.dataTable.defaults, {
                language: {
                    url: "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"
                }
            });

            //DataTablesの初期設定処理
            $("#table1").DataTable({
                ajax: { url: "山手線.json", dataSrc: 'station_l' },
                columns: [
                    { data: "station_cd" },
                    { data: "station_name" }
                ]
            });
        });
    </script>
</head>
<body>
    <header>
        <h1>DataTablesのサンプル</h1>
    </header>
    <article>
        <h2>テストのテーブル</h2>
        <table id="table1" class="mytable">
            <thead>
                <tr>
                    <td>駅コード</td>
                    <td>駅名</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </article>
    <footer>
    </footer>
</body>
</html>

행 높이 변경

table1.css

#table1 thead td{
    padding-top: 1px;
    padding-bottom: 1px;
}
#table1 tbody td{
    padding-top: 1px;
    padding-bottom: 1px;
}

이렇게 보면 이렇게 세로가 시원하다.

행 색상 변경

table1.css

/* 行の高さを変更する */
#table1 thead td{
    padding-top: 1px;
    padding-bottom: 1px;
}
#table1 tbody td{
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の色を変更する */
#table1 thead tr{
    background-color: #CCCCCC;
}
#table1 tbody tr.odd{
    background-color: #FFFFFF;
}
#table1 tbody tr.even{
    background-color: #EEEEEE;
}

보기 쉬워졌어.

선을 긋다

table1.css

/* 行の高さを変更する */
#table1 thead td{
    padding-top: 1px;
    padding-bottom: 1px;
}
#table1 tbody td{
    padding-top: 1px;
    padding-bottom: 1px;
}

/* 行の色を変更する */
#table1 thead tr{
    background-color: #CCCCCC;
}
#table1 tbody tr.odd{
    background-color: #FFFFFF;
}
#table1 tbody tr.even{
    background-color: #EEEEEE;
}

/* 罫線を引く */
#table1 thead td:first-child{
    border-left: 1px solid #404040;
}
#table1 thead td{
    border-top: 1px solid #404040;
    border-right: 1px solid #404040;
}

#table1 tbody td:first-child{
    border-left: 1px solid #404040;
}
#table1 tbody td{
    border-right: 1px solid #404040;
}

완성

Reference

이 문제에 관하여(데이터 테이블의 모양 조정(행 높이, 색상 등)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/aoshirobo/items/e37fc3b4cbbff116e89a

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다