Как сделать таблицу в три колонки и с одной общей ячейкой в html?

Рейтинг: 0Ответов: 1Опубликовано: 08.08.2023

Как сделать таблицу в три колонки и с одной общей ячейкой в html. Я сделал таблицу с помощью буртстап,но не пойму как сделать такую

введите сюда описание изображения

Буду признателен любой помощи!

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>table</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <table class="table table-striped table-light table-bordered text-center fw-bold">
      <thead>
        <tr>
          <th colspan="3" scope="col" class="bg-success text-white">Dimensions, mm</th>
        </tr>
        <tr>
          <th scope="col" class="bg-success text-white">L</th>
          <th scope="col" class="bg-success text-white">W</th>
          <th scope="col" class="bg-success text-white">H</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>97</td>
          <td>24</td>
          <td>56</td>
        </tr>
        <tr>
          <td>70</td>
          <td>47</td>
          <td>105</td>
        </tr>
        <tr>
          <td>151</td>
          <td>36</td>
          <td>98</td>
        </tr>
        <tr>
          <td>151</td>
          <td>36</td>
          <td>98</td>
        </tr>
        <tr>
          <td>151</td>
          <td>51</td>
          <td>99</td>
        </tr>
        <tr>
          <td>98</td>
          <td>43</td>
          <td>57</td>
        </tr>
        <tr>
          <td>179</td>
          <td>36</td>
          <td>66</td>
        </tr>
        <tr>
          <td>91</td>
          <td>70</td>
          <td>107</td>
        </tr>
        <tr>
          <td>91</td>
          <td>70</td>
          <td>100</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>99,5</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>99,5</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>100</td>
        </tr>
        <tr>
          <td>151</td>
          <td>98</td>
          <td>100</td>
        </tr>
        <tr>
          <td>182</td>
          <td>77</td>
          <td>166</td>
        </tr>
        <tr>
          <td>175</td>
          <td>175</td>
          <td>125</td>
        </tr>
        <tr>
          <td>197</td>
          <td>172</td>
          <td>176</td>
        </tr>
        <tr>
          <td>331</td>
          <td>202</td>
          <td>222</td>
        </tr>
      </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

Вот так это можно реализовать