Borderless Header Table Template

Achieve a sleek, modern look with this table featuring a distinct, borderless header.

By removing the borders from the header cells and giving them a solid background, the header appears to float cleanly above the structured, bordered table body, creating a strong visual hierarchy.

Screenshot of a table with a solid color header that has no cell borders, above a body with bordered cells.

Get Source Code → Preview →

About this Table Style

This template uses a simple styling trick to separate the look of the table header from the table body. The thead is styled with a background color, but the th elements within it have their borders removed. In contrast, the cells in the tbody have full borders. This creates a visual separation, making the header stand out as a distinct block and giving the entire table a polished, professional appearance.

Key Features:

Floating Header Effect: The borderless, solid-color header creates a clean, modern look.
Strong Visual Hierarchy: Clearly distinguishes the table's column headers from its data content.
Professional Design: A popular style used in modern dashboards and web applications.
Easy to Implement: Achieved with a few simple and specific CSS rules targeting the header and body separately.

Ideal Use Cases:

Dashboards and admin panels.
Data-rich web applications.
Pricing or feature comparison pages where a strong header is desired.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the borderless header table:

/* --- The Header Styling --- */
.borderless-header-table thead {
    background-color: #34495e; /* A strong header color */
    color: #ffffff;
}
.borderless-header-table thead th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border: none; /* The key to the effect: no borders on header cells */
}

/* --- The Body Styling --- */
.borderless-header-table tbody td {
    padding: 12px 15px;
    border-top: 1px solid #ccc; /* Horizontal line between rows */
    border-right: 1px solid #ccc; /* Vertical line between cells */
}
/* Remove the right border on the last cell in a row */
.borderless-header-table tbody td:last-child {
    border-right: none;
}
.borderless-header-table .td-center {
    text-align: center;
}
.borderless-header-table tbody tr:hover {
    background-color: #f5f5f5;
}

</style>

<table class="borderless-header-table">
    <thead>
        <tr>
            <th scope="col">Task Name</th>
            <th scope="col">Assigned To</th>
            <th scope="col" class="td-center">Priority</th>
            <th scope="col">Due Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Finalize Q3 Report</td>
            <td>Alicia Keys</td>
            <td class="td-center">High</td>
            <td>2025-09-25</td>
        </tr>
        <tr>
            <td>Design New Landing Page Mockup</td>
            <td>Bruno Mars</td>
            <td class="td-center">Medium</td>
            <td>2025-10-01</td>
        </tr>
        <tr>
            <td>Test API Endpoints</td>
            <td>Cardi B</td>
            <td class="td-center">High</td>
            <td>2025-09-28</td>
        </tr>
        <tr>
            <td>Update Help Documentation</td>
            <td>Dua Lipa</td>
            <td class="td-center">Low</td>
            <td>2025-10-15</td>
        </tr>
    </tbody>
</table>

View Output