@OstapO

Как правильно сделать разметку для заголовка таблицы?

5d874a4d4faed773318223.jpeg
Подскажите пожалуйста как правильно написать разметку для заголовка таблицы, а именно для выделенной области на скриншоте? Нужно чтобы колонки в thead и tbody были зависимы между собой.
То что сделано сейчас:
код

<table class="table table-striped mb-0">
    <thead>
        <tr>
            <th class="align-middle text-center" rowspan="1">Part Number</th>
            <th class="align-middle text-center" rowspan="1">Descriptive</th>
            <th class="align-middle text-center" rowspan="1">
                Rated Stand-Off Voltage
                <br> <span>V<sub>WM</sub> <br>V</span>
            </th>
            <th class="align-middle text-center" rowspan="1">Power Rating
                <br>
                <span>P<sub>D</sub> <br>W</span></th>
            <th class="align-middle text-center" rowspan="1">Package</th>
            <th class="align-middle text-center" colspan="4">Inventory</th>
            <th class="align-middle text-center" rowspan="1">Descriptive</th>
            <th class="align-middle text-center" rowspan="1">Datasheet</th>
        </tr>
    </thead>
    <tbody>
        <!-- Start Row -->
        <tr>
            <td class="align-middle">
                <a href="#" class="pr-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
                        <path fill="none" fill-rule="evenodd" stroke="#BF232A" stroke-linejoin="round" d="M24 18a6 6 0 1 1-12 0 6 6 0 0 1 12 0zM19 6.5V3H6V1H1v15.5a1.5 1.5 0 1 0 3 0v-10h17V9M2.5 18H9m6.272 0h5.456M18 20.728v-5.456" />
                    </svg>
                </a>
                <a href="#" class="pr-3">1N645</a>
                <a href="#" data-toggle="tooltip" data-placement="bottom" title="Temperature: TJ=110C">
                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
                        <path fill="none" fill-rule="evenodd" stroke="#BF232A" stroke-linejoin="round" d="M22 11.5C22 17.3 17.298 22 11.5 22 5.7 22 1 17.3 1 11.5 1 5.702 5.7 1 11.5 1 17.298 1 22 5.702 22 11.5zm-10.5 4.794V9.09m0-.591V7" />
                    </svg>
                </a>
            </td>
            <td class="align-middle text-center">Transient Voltage Suppressor</td>
            <td class="align-middle text-center">17</td>
            <td class="align-middle text-center">1500</td>
            <td class="align-middle text-center"><a href="#">DO-35</a></td>
            <td class="align-middle text-center">Digitron</td>
            <td class="align-middle text-center">1350</td>
            <td class="align-middle text-center"><a href="#">RFQ</a></td>
            <td class="align-middle text-center">5/24/2019
                <br> 2:05:12 PM</td>
            <td class="align-middle text-center">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                    </svg>
                </a>
            </td>
            <td class="align-middle text-center">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
                        <path fill="#BF232A" fill-rule="evenodd" d="M14.68 13.434a10.816 10.816 0 0 0-2.502.193c1.049.389 1.983.57 2.657.653l.07.004c.266 0 .299-.24.3-.342.003-.081-.015-.487-.524-.508m-6.546.615c.44-.24.887-.454 1.34-.643a13.22 13.22 0 0 1-1.286-.917c.01.535-.008 1.056-.054 1.56m-3.239 3.875c-.132.162-.17.303-.116.417.122.257.595.316.83-.005a7.692 7.692 0 0 0 1.079-2.137c-.955.75-1.545 1.42-1.793 1.725M6.122 7.429c-.106 0-.27.087-.36.25-.092.163-.08.342.035.53.336.554.7 1.075 1.093 1.562a14.57 14.57 0 0 0-.585-2.152c-.07-.19-.152-.19-.183-.19M13 7V1l6 6h-6zm1.713 8.271a12.94 12.94 0 0 1-4.096-1.229 13.03 13.03 0 0 0-2.664 1.271c-.277 1.378-.792 2.593-1.535 3.613a1.516 1.516 0 0 1-1.226.644c-.559 0-1.087-.322-1.315-.799-.225-.472-.136-1.01.243-1.478.347-.428 1.312-1.514 2.926-2.586.156-.978.187-2.041.092-3.162a14.985 14.985 0 0 1-2.196-2.816c-.303-.499-.322-1.061-.051-1.542.259-.459.742-.758 1.231-.758.506 0 .926.315 1.121.842.15.409.646 1.862.855 3.812.79.745 1.665 1.376 2.607 1.88a11.999 11.999 0 0 1 4.015-.527c.994.037 1.5.796 1.486 1.526-.017.83-.647 1.416-1.493 1.309zm5.141-9.125l-6-6A.505.505 0 0 0 13.5 0H.5a.5.5 0 0 0-.5.5v23a.5.5 0 0 0 .5.5h19a.5.5 0 0 0 .5-.5v-17a.504.504 0 0 0-.146-.354z" />
                    </svg>
                </a>
            </td>
        </tr>
        <!-- End Row -->
    </tbody>
</table>

  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы