JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<table>
    <tr>
        <td>Title</td>
        <td>Pubdate</td>
        <td>Options</td>
    </tr>
    <tr>
        <td class="info-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="info-td"></td>
        <td class="info-td">about an hour ago</td>
        <td class="action-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="action-td">Options</td>
        <td class="action-td">about an hour ago</td>
    </tr>
    <tr>
        <td class="info-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="info-td"></td>
        <td class="info-td">about an hour ago</td>
        <td class="action-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="action-td">Options</td>
        <td class="action-td">about an hour ago</td>
    </tr>
    <tr>
        <td class="info-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="info-td"></td>
        <td class="info-td">about an hour ago</td>
        <td class="action-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="action-td">Options</td>
        <td class="action-td">about an hour ago</td>
    </tr>
    <tr>
        <td class="info-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="info-td"></td>
        <td class="info-td">about an hour ago</td>
        <td class="action-td">Oil Sands Production To Hit 4 Million Bpd By 2030</td>
        <td class="action-td">Options</td>
        <td class="action-td">about an hour ago</td>
    </tr>
</table>

CSS

.action-td {
    display: none;
}
tr:hover > .info-td {
    display: none;
    background-color: #efefef;
    color:#000;
}
tr:hover > .action-td {
    display: table-cell;
    background-color: #333;
    color:#fff;
}
table {
    width: 100%;
}
tr {
    background-color: #efefef;
}