Tables

vel-src: table.css

Styled data table component with striped rows, hover highlighting, borders, compact density, and a responsive overflow wrapper.

Class	Properties
vel-table	Base table — full width, border-collapse, thead styling, cell padding
vel-table-striped	Alternating row background on even rows
vel-table-hover	Highlight row on :hover
vel-table-bordered	Adds borders to all cells
vel-table-compact	Reduced cell padding for dense data
vel-table-wrapper	overflow-x: auto wrapper for responsive horizontal scroll

Examples

Basic table

Name	Status	Role
Alice	Active	Admin
Bob	Pending	Editor
Carol	Inactive	Viewer

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-table-wrapper">
    <table class="vel-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Status</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td><span class="vel-badge vel-badge-success">Active</span></td>
          <td>Admin</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td><span class="vel-badge vel-badge-warning">Pending</span></td>
          <td>Editor</td>
        </tr>
        <tr>
          <td>Carol</td>
          <td><span class="vel-badge vel-badge-neutral">Inactive</span></td>
          <td>Viewer</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Striped + hover

Package	Version	License
veloracss	0.2.0	MIT
postcss	8.4.0	MIT
vite	5.0.0	MIT

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-table-wrapper">
    <table class="vel-table vel-table-striped vel-table-hover">
      <thead>
        <tr>
          <th>Package</th>
          <th>Version</th>
          <th>License</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>veloracss</td>
          <td>0.2.0</td>
          <td>MIT</td>
        </tr>
        <tr>
          <td>postcss</td>
          <td>8.4.0</td>
          <td>MIT</td>
        </tr>
        <tr>
          <td>vite</td>
          <td>5.0.0</td>
          <td>MIT</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>