Định dạng có điều kiện của bảng HTML

Ghi chú. Nếu bạn sử dụng [odd] thay vì [even], kiểu dáng sẽ xuất hiện trên hàng 1,3,5, v.v. thay vì 2,4,6, v.v.

Bảng HTML - Sọc ngựa vằn dọc

Để tạo sọc ngựa vằn dọc, hãy tạo kiểu cho mọi cột khác, thay vì mọi hàng khác

1234567891011121314151617181920

Đặt :nth-child[even] cho các phần tử dữ liệu bảng như thế này

Thí dụ

td. con thứ n[chẵn], thứ. con thứ n[thậm chí] {
  màu nền. #D6EEEE;
}

Tự mình thử »

Ghi chú. Đặt bộ chọn :nth-child[] trên cả hai phần tử th và td nếu bạn muốn có kiểu dáng trên cả tiêu đề và ô bảng thông thường

Kết hợp sọc ngựa vằn dọc và ngang

Bạn có thể kết hợp kiểu dáng từ hai ví dụ trên và bạn sẽ có các sọc trên mọi hàng khác và mọi cột khác

Nếu bạn sử dụng màu trong suốt, bạn sẽ có hiệu ứng chồng lấp

Sử dụng màu rgba[] để chỉ định độ trong suốt của màu

Thí dụ

tr. con thứ n[thậm chí] {
  màu nền. rgb[150, 212, 212, 0. 4];
}

th. con thứ n[thậm chí],td. con thứ n[thậm chí] {
  màu nền. rgb[150, 212, 212, 0. 4];
}

Tự mình thử »

dải phân cách ngang

Tên HọTiết kiệmPeterGriffin$100LoisGriffin$150JoeSwanson$300

Nếu bạn chỉ định đường viền ở dưới cùng của mỗi hàng trong bảng, bạn sẽ có một bảng với các đường phân chia theo chiều ngang

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict[
    [
        ["Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]],
        ["Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]],
        ["Temperature", [1, -20, 3.512, 4, 10423, -441.2]],
        ["Humidity", [10, 20, 30, 40, 50, 60]],
        ["Pressure", [2, 10924, 3912, -10, 3591.2, 15]],
    ]
]

df = pd.DataFrame[data]

app = Dash[__name__]

df['id'] = df.index

app.layout = dash_table.DataTable[
    data=df.to_dict['records'],
    sort_action='native',
    columns=[
        {'name': 'Date', 'id': 'Date', 'type': 'datetime', 'editable': False},
        {'name': 'Delivery', 'id': 'Delivery', 'type': 'datetime'},
        {'name': 'Region', 'id': 'Region', 'type': 'text'},
        {'name': 'Temperature', 'id': 'Temperature', 'type': 'numeric'},
        {'name': 'Humidity', 'id': 'Humidity', 'type': 'numeric'},
        {'name': 'Pressure', 'id': 'Pressure', 'type': 'any'},
    ],
    editable=True,
    style_data_conditional=[
        {
            'if': {
                'column_id': 'Region',
            },
            'backgroundColor': 'dodgerblue',
            'color': 'white'
        },
        {
            'if': {
                'filter_query': '{Humidity} > 19 && {Humidity} < 41',
                'column_id': 'Humidity'
            },
            'backgroundColor': 'tomato',
            'color': 'white'
        },

        {
            'if': {
                'column_id': 'Pressure',

                # since using .format, escape { with {{
                'filter_query': '{{Pressure}} = {}'.format[df['Pressure'].max[]]
            },
            'backgroundColor': '#85144b',
            'color': 'white'
        },

        {
            'if': {
                'row_index': 5,  # number | 'odd' | 'even'
                'column_id': 'Region'
            },
            'backgroundColor': 'hotpink',
            'color': 'white'
        },

        {
            'if': {
                'filter_query': '{id} = 4',  # matching rows of a hidden column with the id, `id`
                'column_id': 'Region'
            },
            'backgroundColor': 'RebeccaPurple'
        },

        {
            'if': {
                'filter_query': '{Delivery} > {Date}', # comparing columns to each other
                'column_id': 'Delivery'
            },
            'backgroundColor': '#3D9970'
        },

        {
            'if': {
                'column_editable': False  # True | False
            },
            'backgroundColor': 'rgb[240, 240, 240]',
            'cursor': 'not-allowed'
        },

        {
            'if': {
                'column_type': 'text'  # 'text' | 'any' | 'datetime' | 'numeric'
            },
            'textAlign': 'left'
        },

        {
            'if': {
                'state': 'active'  # 'active' | 'selected'
            },
           'backgroundColor': 'rgba[0, 116, 217, 0.3]',
           'border': '1px solid rgb[0, 116, 217]'
        }

    ]
]

if __name__ == '__main__':
    app.run_server[debug=True]

Bạn có thể áp dụng định dạng có điều kiện cho bảng không?

Bảng định dạng trong HTML là gì?

Bạn có thể hiển thị văn bản ở định dạng có điều kiện không?