Как расширить фон шапки таблицы за ее пределы?

Question

[ligisayan]

Есть сайт на wordpress и в нем таблица - фидл. Как сделать так, чтобы фон заголовка thead распространялся на всю ширину страницы так, и при этом, чтобы ячейки сохранили свое местоположение? Может быть есть способ выносить заголовок за пределы таблицы, как это можно делать с инпутами формы? В любом случае, не хотелось бы двигать т.к. wordpress напичкан вставками различных функций.

<div class="col-full">
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
  <thead>
    <tr>
      <th class="product-thumbnail">
        <h1 class="entry-title">Корзина</h1>
      </th>
      <th class="product-name">Обработка заказов производится<br>с 09:00 до 18:00</th>
      <th class="product-subtotal">Итого</th>
      <th class="product-remove"><button>Оформить заказ</button></th>
    </tr>
  </thead>
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-thumbnail">
        thumbnail
      </td>
      <td class="product-name" data-title="Товар">
        Товар
      </td>
      <td class="product-subtotal" data-title="Итого">
        Итого
      </td>
      <td class="product-remove">
        Удалить эту позицию</td>
    </tr>
  </tbody>
</table>
</div>

.col-full {
  width: 980px;
  margin-right:50px;
  margin-left:50px;
}
thead {
  background-color:yellow;
}

Answer 1

[ligisayan]

Решение через дополнительное позиционирование блока на всю ширину - фидл

<div class="yellow"></div>
<div class="col-full">
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
  <thead>
    <tr>
      <th class="product-thumbnail">
        <h1 class="entry-title">Корзина</h1>
      </th>
      <th class="product-name">Обработка заказов производится<br>с 09:00 до 18:00</th>
      <th class="product-subtotal">Итого</th>
      <th class="product-remove"><button>Оформить заказ</button></th>
    </tr>
  </thead>
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-thumbnail">
        thumbnail
      </td>
      <td class="product-name" data-title="Товар">
        Товар
      </td>
      <td class="product-subtotal" data-title="Итого">
        Итого
      </td>
      <td class="product-remove">
        Удалить эту позицию</td>
    </tr>
  </tbody>
</table>
</div>

.col-full {
  position:relative;
  z-index:999;
  width: 980px;
  margin-right:50px;
  margin-left:50px;
}
.yellow {
      position: absolute;
    width: 100%;
    height: 82px;
    background-color: yellow;
    z-index: 1;
}
thead {
  background-color:yellow;
}

Comments

[Emptyform]

А я думал о таком варианте, он отмел - нужно вручную выставлять высоту. Костыль получается

Answer 2

[Emptyform]

Что вам мешает содержимое <thead> перенести в <div> непосредственно перед таблицей и стилизовать его как бог на душу положит?

Comments

[Negwereth]

То, что таблица ресайзит ширину колонки как ей на душу положит, и синхронизировать это с внешней шапкой означает тучу скрипта, который должен будет дёргать DOM на каждый чих.

[Emptyform]

Negwereth: если найдете решение без js здесь тоже поделитесь)

[Negwereth]

Emptyform: его нет.

[ligisayan]

Negwereth: ну почему же - решение есть ниже. порой для этого нужно пораскинуть мозгами