Log In Sign Up
Home›Docs›Data›CSS Table

CSS Table

Category: Data
Pure CSS table component with multiple style variations, supporting basic frozen headers and side columns

Basic Table

The original table has been reset. You can directly use native table, tr, th, and td tags.

  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Border Types

Use the lines attribute to display borders:

  • lines="outer": Adds an outer border wrapping the entire table
  • lines="all": Converts the table to Excel-like cell format
  • lines="inner": Only keeps internal row borders (no outer border)
  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200
    ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200
    ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Custom Borders

Use lines="inner" for a borderless table, then wrap it in a container with custom border styles:

  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Alternating Row Colors

Add stripe attribute:

  • stripe="odd": Light background on odd rows (default)
  • stripe="even": Light background on even rows
  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200
    ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Selected Rows

Add selected attribute to tr, th, or td elements for selected styling.

  • Output
  • HTML
  • ID City University Level Enrollment Status
    101 Cambridge Harvard University Undergraduate 23,000
    102 Stanford Stanford University Undergraduate 17,000
    103 Cambridge Massachusetts Institute of Technology Undergraduate 11,500
    104 Oxford University of Oxford Undergraduate 24,000
    105 New York Columbia University Undergraduate 22,000
    106 Pasadena California Institute of Technology Undergraduate 2,200 
  •

Hover Effects

Add hoverable attribute to enable row highlighting on hover.

  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Disabled Rows

Add disabled attribute to tr, th, or td elements.

  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Focused Cells

Add focused attribute to td elements to indicate focus state. Can be used with focusable attribute.

  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Text Alignment

Use these CSS classes for alignment:

  • _a-l: Left align
  • _a-r: Right align
  • _a-c: Center align
  • Output
  • HTML
  • ID City University Enrollment
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Text Ellipsis

Use _ell or _ell-* classes for single/multi-line text truncation. By default has max-width of 16rem (160px), adjustable via --_table-ell variable.

  • Output
  • HTML
  • Long text that will be truncated
    ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL.
    Two lines of text that will truncate
    ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL. 
  •

Using More Component

For expandable text content, use oc-more component:

  • Output
  • HTML
  • ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL. 
  •

Table Headers with Callouts

Use colspan on td with oc-callout for full-width header messages:

关于oc-callout组件用法，请点击这里。

  • Output
  • HTML
  • ID City University Enrollment
    Choose a university whose academic strengths align with your career goals and learning style.
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200 
  •

Static Functional Tables

Combine native elements and framework components to create feature-rich static tables.

  • Output
  • HTML
  • ID City University Enrollment Actions
    101 Cambridge Harvard University 23,000
    102 Stanford Stanford University 17,000
    103 Cambridge Massachusetts Institute of Technology 11,500
    104 Oxford University of Oxford 24,000
    105 New York Columbia University 22,000
    106 Pasadena California Institute of Technology 2,200
    Total 142 items First Prev 1 2 3 4 5 6 Next Last
    Select all
    Batch delete 
  •

Embedded Elements

Tables can contain various framework components like:

  • oc-checkbox
  • oc-radio
  • oc-badge
  • oc-status
  • And more
  • Output
  • HTML
  • Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10 Col 11 Col 12 Col 13
    New York 
  •

Responsive Width

Large tables often have poor display performance on mobile and tablet devices. Without scroll handling, all content will appear cramped together.

Scrolling Container

Excessive table data can cause the table to expand beyond its parent container, resulting in unintended page-wide scrolling. In such cases, a scroll container should be used to confine the scrolling area.

Use _scroller class to contain wide tables within a scrollable area.

For details on implementing scroll containers, please refer to the documentation section on _scroller.

  • Output
  • HTML
  • ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL. 
  •

No Line Wrapping

Add nowrap attribute to prevent cell content wrapping (requires scrolling container).

  • Output
  • HTML
  • ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL. 
  •

Maximum Width

The widest property is similar to nowrap - it converts all elements within a cell into inline elements, calculates the maximum content width, and then maximizes the table width accordingly. In such cases, a scroll container is typically required.

The key difference between them is:

  • nowrap only affects the direct content of a cell.
  • widest applies to all child nodes within a cell.
  • Output
  • HTML
  • ID City University Enrollment Description
    101 Cambridge Harvard University 23,000 Oldest US university, renowned for law, business and medicine. 8 US presidents among alumni.
    102 Stanford Stanford University 17,000 Silicon Valley hub known for engineering and entrepreneurship. Google and Nike founders studied here.
    103 Cambridge Massachusetts Institute of Technology 11,500 Global leader in STEM education and research. 98 Nobel laureates affiliated.
    104 Oxford University of Oxford 24,000 World's second-oldest university, famous for tutorial system. 28 British PMs graduated here.
    105 New York Columbia University 22,000 Ivy League institution strong in journalism and arts. Awards the Pulitzer Prize.
    106 Pasadena California Institute of Technology 2,200 Elite science/engineering school with 6:1 student-faculty ratio. Operates NASA's JPL. 
  •

Frozen Rows and Columns

Without using JavaScript, three freezing modes can be implemented: leftmost column freeze, rightmost column freeze, and header freeze. Follow these steps with reference to the example:

  1. Wrap the table with _table-wrap
  2. Apply the fixed attribute to _table-wrap with possible values: head, left, or right (multiple values can be combined)
  3. For left/right freezing:
    • Set table width larger than container width
    • Use nowrap or widest attributes to prevent line breaks if the table is wide enough
  4. For header freezing:
    • Set _table-wrap height greater than table height (via --_table-wrap-h CSS variable)
  5. To enable grid lines:
    • Add lines=all or lines=outer attribute to the table
  • Output
  • HTML
  • Date Hour City AQI PM2.5 PM2.5_24h PM10 PM10_24h SO2 SO2_24h NO2 NO2_24h O3 O3_24h O3_8h O3_8h_24h CO CO_24h
    2014-05-13 18 Neo-Spire 103 77 67 105 87 8 13 15 14 81 114 86 109 1.637 1.372
    2014-05-13 18 Quantum Bay 84 62 53 104 92 44 52 49 42 76 129 93 139 1.127 1.198
    2014-05-13 18 Verdantium 84 46 50 75 81 22 28 22 24 127 159 140 145 0.768 0.734
    2014-05-13 18 Biolume 83 48 48 114 126 54 100 47 51 138 150 137 137 1.324 1.632
    2014-05-13 18 Oceania-9 95 71 59 132 111 47 30 69 61 99 129 95 152 0.918 0.913
    2014-05-13 18 Neonova 113 19 37 174 135 12 27 11 29 66 79 72 83 0.657 1.316
    2014-05-13 18 Datafort 60 27 23 68 52 8 7 30 26 75 107 87 88 1.182 1.199
    2014-05-13 18 Luna Metropole 74 31 51 38 66 8 12 33 38 116 178 128 146 1.141 1.351
    2014-05-13 18 Marsalis 121 76 65 169 155 30 48 43 66 240 240 180 180 0.871 1.376
    2014-05-13 18 Europa Terminus 63 37 57 75 117 20 14 33 44 59 96 36 75 1.784 1.963
    2014-05-13 18 Harmonia 78 57 42 73 57 45 25 44 29 34 42 31 49 2.705 2.188
    2014-05-13 18 Pax Ultima 22 13 35 22 55 9 15 33 34 35 59 37 39 1.225 1.356 
  •

lines=outer.

  • Output
  • HTML
  • Date Hour City AQI PM2.5 PM2.5_24h PM10 PM10_24h SO2 SO2_24h NO2 NO2_24h O3 O3_24h O3_8h O3_8h_24h CO CO_24h
    2014-05-13 18 Neo-Spire 103 77 67 105 87 8 13 15 14 81 114 86 109 1.637 1.372
    2014-05-13 18 Quantum Bay 84 62 53 104 92 44 52 49 42 76 129 93 139 1.127 1.198
    2014-05-13 18 Verdantium 84 46 50 75 81 22 28 22 24 127 159 140 145 0.768 0.734
    2014-05-13 18 Biolume 83 48 48 114 126 54 100 47 51 138 150 137 137 1.324 1.632
    2014-05-13 18 Oceania-9 95 71 59 132 111 47 30 69 61 99 129 95 152 0.918 0.913
    2014-05-13 18 Neonova 113 19 37 174 135 12 27 11 29 66 79 72 83 0.657 1.316
    2014-05-13 18 Datafort 60 27 23 68 52 8 7 30 26 75 107 87 88 1.182 1.199
    2014-05-13 18 Luna Metropole 74 31 51 38 66 8 12 33 38 116 178 128 146 1.141 1.351
    2014-05-13 18 Marsalis 121 76 65 169 155 30 48 43 66 240 240 180 180 0.871 1.376
    2014-05-13 18 Europa Terminus 63 37 57 75 117 20 14 33 44 59 96 36 75 1.784 1.963
    2014-05-13 18 Harmonia 78 57 42 73 57 45 25 44 29 34 42 31 49 2.705 2.188
    2014-05-13 18 Pax Ultima 22 13 35 22 55 9 15 33 34 35 59 37 39 1.225 1.356 
  •

lines=all.

  • Output
  • HTML
  • Date Hour City AQI PM2.5 PM2.5_24h PM10 PM10_24h SO2 SO2_24h NO2 NO2_24h O3 O3_24h O3_8h O3_8h_24h CO CO_24h
    2014-05-13 18 Neo-Spire 103 77 67 105 87 8 13 15 14 81 114 86 109 1.637 1.372
    2014-05-13 18 Quantum Bay 84 62 53 104 92 44 52 49 42 76 129 93 139 1.127 1.198
    2014-05-13 18 Verdantium 84 46 50 75 81 22 28 22 24 127 159 140 145 0.768 0.734
    2014-05-13 18 Biolume 83 48 48 114 126 54 100 47 51 138 150 137 137 1.324 1.632
    2014-05-13 18 Oceania-9 95 71 59 132 111 47 30 69 61 99 129 95 152 0.918 0.913
    2014-05-13 18 Neonova 113 19 37 174 135 12 27 11 29 66 79 72 83 0.657 1.316
    2014-05-13 18 Datafort 60 27 23 68 52 8 7 30 26 75 107 87 88 1.182 1.199
    2014-05-13 18 Luna Metropole 74 31 51 38 66 8 12 33 38 116 178 128 146 1.141 1.351
    2014-05-13 18 Marsalis 121 76 65 169 155 30 48 43 66 240 240 180 180 0.871 1.376
    2014-05-13 18 Europa Terminus 63 37 57 75 117 20 14 33 44 59 96 36 75 1.784 1.963
    2014-05-13 18 Harmonia 78 57 42 73 57 45 25 44 29 34 42 31 49 2.705 2.188
    2014-05-13 18 Pax Ultima 22 13 35 22 55 9 15 33 34 35 59 37 39 1.225 1.356 
  •

line=inner.

  • Output
  • HTML
  • Date Hour City AQI PM2.5 PM2.5_24h PM10 PM10_24h SO2 SO2_24h NO2 NO2_24h O3 O3_24h O3_8h O3_8h_24h CO CO_24h
    2014-05-13 18 Neo-Spire 103 77 67 105 87 8 13 15 14 81 114 86 109 1.637 1.372
    2014-05-13 18 Quantum Bay 84 62 53 104 92 44 52 49 42 76 129 93 139 1.127 1.198
    2014-05-13 18 Verdantium 84 46 50 75 81 22 28 22 24 127 159 140 145 0.768 0.734
    2014-05-13 18 Biolume 83 48 48 114 126 54 100 47 51 138 150 137 137 1.324 1.632
    2014-05-13 18 Oceania-9 95 71 59 132 111 47 30 69 61 99 129 95 152 0.918 0.913
    2014-05-13 18 Neonova 113 19 37 174 135 12 27 11 29 66 79 72 83 0.657 1.316
    2014-05-13 18 Datafort 60 27 23 68 52 8 7 30 26 75 107 87 88 1.182 1.199
    2014-05-13 18 Luna Metropole 74 31 51 38 66 8 12 33 38 116 178 128 146 1.141 1.351
    2014-05-13 18 Marsalis 121 76 65 169 155 30 48 43 66 240 240 180 180 0.871 1.376
    2014-05-13 18 Europa Terminus 63 37 57 75 117 20 14 33 44 59 96 36 75 1.784 1.963
    2014-05-13 18 Harmonia 78 57 42 73 57 45 25 44 29 34 42 31 49 2.705 2.188
    2014-05-13 18 Pax Ultima 22 13 35 22 55 9 15 33 34 35 59 37 39 1.225 1.356 
  •

Prev
CSS Comment
14 days ago

New Launch: 20% Off All Products

Unlock all examples and development resources