Изменить интервал между границами для столбца с другим диапазоном

У меня есть вопрос, как добиться представления, как показано ниже, используя только собственные элементы таблицы html.

В основном то, что я хотел бы сделать, это изменить интервал между границами тех td, которые подпадают под th с диапазоном, равным 4. Возможно ли это вообще?

table {
  background-color: gray;
  border-spacing: 0.5em;

}

td, th {
 background-color: orange;
}

    <table>
      <thead>
        <tr>
          <th>Th1</th>
          <th colspan = "4">Th2</th>
          <th>Th3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Td</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td for th span 4</td>
          <td>Td</td>
        </tr>
      </tbody>
    </table>

html css

04.03.2019 11:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте вставить таблицу внутри таблицы

.table1 {
  background-color: gray;
  border-spacing: 0.5em;
}

td,
th {
  background-color: orange;
}

.table2 {
  background-color: gray;
  border-spacing: 0.1em 0;
}

.holder {
  background-color: grey;
  padding:0;
}

<table class='table1'>
  <thead>
    <tr>
      <th>Th1</th>
      <th colspan = "4">Th2</th>
      <th>Th3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Td</td>
      <td colspan='4' class='holder'>
        <table class='table2'>
          <tr>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
            <td>Td for th span 4</td>
          </tr>
        </table>
      </td>
      <td>Td</td>
    </tr>
  </tbody>
</table>

04.03.2019 12:00

Вы можете имитировать это с помощью отступов и применить окраску только к содержимому:

table {
  background-color: gray;
  border-spacing: 0.3em 0.2em;
}

td,
th {
  background: orange content-box;
}

th:nth-child(2) {
  padding: 0 0.5em;
}

td:nth-child(2) {
  padding-left: 0.5em;
}

td:nth-last-child(2) {
  padding-right: 0.5em;
}

<table>
  <thead>
    <tr>
      <th>Th1</th>
      <th colspan = "4">Th2</th>
      <th>Th3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Td</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td for th span 4</td>
      <td>Td</td>
    </tr>
  </tbody>
</table>

04.03.2019 12:02

Другие вопросы по теме

Адаптивный макет в приложении React

Сделать так, чтобы панель навигации превышала максимальную ширину [CSS]

Как я могу сделать так, чтобы div оставался рядом с определенным элементом на всех типах экранов с помощью HTML, CSS и Js?

Плавный переход расширения/свертывания с использованием перехода vue с учетом высоты динамического содержимого

HTML, как добавить margin-bottom во вложенный список

Reactjs: css приводит к тому, что результат реакции объединяется

Жидкая горизонтальная прокрутка Flexbox

Выравнивание текста CSS при переносе

Перевернуть изображение продукта при наведении в Woocommerce

Получить высоту div после изменения содержимого в vanilla javascript

Изменить интервал между границами для столбца с другим диапазоном

Ответы 2

Другие вопросы по теме

Похожие вопросы