JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<table>
    <thead>
        <tr>
            <th>Комнаты</th>
            <th>Общая</th>
            <th>Жилая</th>
            <th>Кухня</th>
            <th>Балкон</th>
            <th>Прихожая</th>
            <th>Стоимость</th>
        </tr>
    </thead>
     
    <tbody>      
        <tr>
            <td>
                2-комнатная
                <br /> 1ярус
                <br /> инфа о 1 ярусе
            </td>
            <td rowspan="2">76 м</td>
            <td rowspan="2">76 м</td>
            <td rowspan="2">20 м</td>
            <td rowspan="2">20 м</td>
            <td rowspan="2">20 м</td>
            <td rowspan="2">15 000 000 Р</td>
        </tr>
        <tr>
            <td>
                2ярус
                <br /> инфа о 2 ярусе
            </td>
        </tr>
        <tr>
            <td>
                Картинка <br />
                Картинка
            </td>            
            <td colspan="5">
                Наличие на этажах
            </td>
            <td>
                Кнопка
            </td>
        </tr>          
    </tbody>
    
    <tbody>      
        <tr>
            <td>
                2-комнатная
            </td>
            <td>76 м</td>
            <td>76 м</td>
            <td>20 м</td>
            <td>20 м</td>
            <td>20 м</td>
            <td>15 000 000 Р</td>
        </tr>
        <tr>
            <td>
                Картинка
            </td>
            <td colspan="5">
                Наличие на этажах
            </td>
            <td>
                Кнопка
            </td>
        </tr>          
    </tbody>
        
</table>

SCSS

table {
   border-collapse: collapse;
   border-spacing: 0
}

td {
    padding: 20px;
}

tbody {
    cursor: pointer;
    &:hover {
        outline: 2px solid red;
        outline-offset: -2px;
    }
    &:nth-child(2n) {
        background: #F3F3F3;    
    }
}