JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table-oil">
    <tbody>
        <tr>
            <th class="caption">AGIP OSO</th>
            <th class="oil-types" colspan="12">
                <div class="caption-wrapper">
                    <div class="caption-gost">Название<br> по ГОСТ-у</div>

                    <div class="caption-gost-value">
                        <span class="oil-link" data-link-source="oil-1">ВМГЗ-45</span>
                        <span class="oil-link" data-link-source="oil-2">МГЕ-46В</span>
                        <span class="oil-link" data-link-source="oil-3">Гидромасло А</span>
                        <span class="oil-link" data-link-source="oil-4">ВМГЗ-45</span>
                        <span class="oil-link" data-link-source="oil-5">ВМГЗ-45</span>
                        <span class="oil-link" data-link-source="oil-6">ВМГЗ-45</span>
                    </div>

                    <div class="close" data-text-active="закрыть спецификацию" data-text-inactive="показать спецификацию">
                        показать спецификацию
                    </div>
                </div>

            </th>
        </tr>


        <tr class="oil-series">
            <td class="oil-number-caption">Номер серии</td>
            <td data-source="oil-1">15</td>
            <td data-source="oil-2">22</td>
            <td data-source="oil-3">32</td>
            <td data-source="oil-3">46</td>
            <td data-source="oil-3">15</td>
            <td data-source="oil-3">22</td>
            <td data-source="oil-4">32</td>
            <td data-source="oil-4">6</td>
            <td data-source="oil-5">15</td>
            <td data-source="oil-6">22</td>
            <td data-source="oil-6">32</td>
            <td data-source="oil-6">46</td>
        </tr>

        <tr>
            <td class="oil-param">
                Вязкость при 40°С
            </td>
            <td>4545</td>
           ...

CSS

body {
            padding: 20px;

            background: #f4f4f4;
            }

        .table-oil {
            border-collapse: separate;
            }

            .table-oil td {
                padding: 5px 10px;

                border-width: 1px;
                border-style: solid;
                border-color: #fff;
                border-right-color: #e8e8e8;
                border-bottom-color: #e8e8e8;
                color: #bebebe;
                }
            .table-oil td:first-child {
                border-top-color: #f4f4f4;
                border-left-color: #f4f4f4;
                border-bottom-color: #f4f4f4;
                }
            .table-oil .mark {
                background: #ffcc00;
                border-color: #ffcc00;
                }