как сверстать данную таблицу. Проблема именно с подложкой под центральной колонкой. Возможно ли это силами табличных тегов?

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

.table {
  /* border-collapse: separate; */
  border-spacing: 12px;
  border: none !important;
  margin: 0;
  width: unset;
  position: relative;
}

.center-col {
  position: relative;
  background: yellow;
  padding: 30px;
}

.color-col {
  padding: 30px !important;
  background-color: #eaeaea;
}

.inner {
  gap: 10px;
  border-radius: 10px;
  position: relative;
  background: red;
}

tr:hover th,
tr:hover td {
  background: rgba(128, 128, 128, 0.274);
}

.table-inner-col img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  object-fit: cover;
}
    <table class="table table-bordered">
      <col />
      <col class="center-col" />
      <col class="center-col" />
      <col class="center-col" />
      <col />

      <tbody>
        <tr>
          <td class="centered-col table-col">
            <div class="table-inner">
              Непривлекательные предложения по вкладам и кредитам
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col table-col">
            <div class="table-inner">
              Выгодные предложения по вкладам и кредитам
            </div>
          </td>
        </tr>
        <tr>
          <td class="centered-col">
            <div class="table-inner">12</div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner">12</div>
          </td>
        </tr>
        <tr>
          <td class="centered-col"><div class="table-inner">12</div></td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col">
            <div class="table-inner-col">
              <img
                src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg"
                alt=""
              />
            </div>
          </td>
          <td class="centered-col"><div class="table-inner">12</div></td>
        </tr>
      </tbody>
    </table>

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

css html вёрстка таблицы
Источник: Stack Overflow на русском

Ответы

▲ 1
  1. Если таблица имеет фиксированную ширину, то можно на таблицу навесить пвсевдо-элемент и задать ему высоту 100%, ширина фиксированная и отпозиционировать по горизонтали эту плашку
  2. вот как то так

td span {
  padding: 5px 10px;
}

tr td{
  background: gray;
}

tr td:first-child,
tr td:last-child {
  background: transparent;
}

table {
border-collapse: collapse;
}

tr:first-child td:nth-child(2) {
  border-top-left-radius: 10px;
}

tr:first-child td:nth-last-child(-n+2) {
  border-top-right-radius: 10px;
}

tr:last-child td:nth-child(2) {
  border-bottom-left-radius: 10px;
}

tr:last-child td:nth-last-child(-n+2) {
  border-bottom-right-radius: 10px;
}
<table>
  <tr>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
  </tr>
  <tr>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
  </tr>
  <tr>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
  </tr>
  <tr>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
    <td><span>a</span></td>
  </tr>
</table>