JSFiddle - React, Tailwind, and code Playground

Slick Features Table in HTML & CSS

by Jennifer Perrin

HTML

<div id="container">
    
    <table>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th class="iron"><img src="" alt="Harley Davidson Iron 883" /></th>
                <th class="nightster"><img src="" alt="Harley Davidson Nightster" /></th>
                <th class="fortyeight"><img src="" alt="Harley Davidson Forty-Eight" /></th>
            </tr>
            <tr>
                <th>&nbsp;</th>
                <th class="iron"><h2>Iron 883</h2></th>
                <th class="nightster"><h2>Nightster</h2></th>
                <th class="fortyeight"><h2>Forty-Eight</h2></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td class="feature">Engine</td>
                <td class="iron">883cc</td>
                <td class="nightster">1202cc</td>
                <td class="fortyeight">1202cc</td>
            </tr>
            
            <tr>
                <td class="feature">Torque</td>
                <td class="iron">70Nm</td>
                <td class="nightster">98Nm</td>
                <td class="fortyeight">98Nm</td>
            </tr>
            
            <tr>
                <td class="feature">Exhaust</td>
                <td class="iron">Chrome, staggered shorty exhaust with dual mufflers</td>
                <td class="nightster">Chrome, slash-cut exhaust with dual mufflers</td>
                <td class="fortyeight">Chrome, staggered shorty exhaust with dual slash-cut mufflers</td>
            </tr>
            
            <tr>
                <td class="feature">Wheels</td>
                <td class="iron">Black, 13-Spoke Cast Aluminum</td>
                <td class="nightster">Black, Laced Steel</td>
                <td class="fortyeight">Black, Laced Steel</td>
            </tr>
            
            <tr>
                <td class="feature">Ground Clearance</td>
                <td class="iron">120mm</td>
                <td class="nightster">130mm</td>
  ...

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, table, tr, td, th {
    margin: 0; padding: 20px; border: 0;
}

body {
    background: #000 url(images/bg.jpg) center top fixed no-repeat;
    font: 16px Georgia, Serif; color: #ccc;
}

h1 {
    width: 168px; height: 130px; margin: 30px auto; position: relative;
    background: url(images/harley-davidson.png); text-indent: -9999px;
}

#container {
    width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
    background: url(images/bg-pattern.png);
    box-shadow: 0px 0px 15px #000;
}

table {
    border-spacing: 10px 0px;
}

th, td {
    text-align: center; padding: 10px;
}

.feature {
    width: 183px; text-align: right;
    font-size: 24px; font-weight: normal; color: #fff; 
}

.iron, .nightster, .fortyeight {
    background: rgba(255,255,255,0.05);
}

h2 {
    font-size: 24px; font-weight: normal; color: #fff; 
}

tr:hover {
    background: rgba(255,255,255,0.05);
}
    thead tr:hover {
        background: none;
    }