Заставить таблицу HTML превышать ширину div: CSS

Question

Этот вопрос задает напротив того, что обычно требуется: таблица фиксированной ширины, которая превышает ширину родительского элемента (ов).

Фактически, следующая реализацияработает должным образом в браузерах на базе Chrome / Chromium:

#myTable {
  border-collapse: collapse;
  /* Collapse borders */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
  width: 1040px;
  /* Full-width */
  table-layout: fixed;
}


/* This is intended to be in a media query for screens less than 768 px */

#myTable {
  width: 745px;
  /* Full-width + 225px */
}

td:nth-child(1),
th:nth-child(1) {
  width: 51.9px;
}

td:nth-child(2),
th:nth-child(2) {
  width: 158.783px;
}

td:nth-child(3),
th:nth-child(3) {
  width: 225px;
}

td:nth-child(4),
th:nth-child(4) {
  width: 78.2667px;
}

td:nth-child(5),
th:nth-child(5) {
  width: 116.15px;
}

td:nth-child(6),
th:nth-child(6) {
  width: 100.833px;
}

<div style="background-color: #f0f0f0; padding: 5px; width: 540px;">
  <table id="myTable" cellspacing="0" cellpadding="2" border="1">
    <thead>
      <tr>
        <th style="text-align:right;">col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="right">col1</td>
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>
        <td>col6</td>
      </tr>
      <tr>
        <td align="right">col1</td>
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>
        <td>col6</td>
      </tr>
      <tr>
        <td align="right">col1</td>
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>
        <td>col6</td>
      </tr>
      <tr>
    </tbody>
  </table>
</div>

Однако при проверке в Firefox и Microsoft Edge указанные ширины таблицы / столбца не учитываются, вместо этого они соответствуют родительскому div.

Большинство предложенных решений, которые я обнаружил, рекомендуют применять правило table-layout: fixed; к таблице, однако, оно уже применено в этом примере безрезультатно.

У кого-нибудь есть идеи?

Answer 1

Обычно я использую обертку класса / ID и на основе максимальной ширины обертки назначаю ширину таблицы: 100%, которая затем создаст эффект полосы прокрутки со свойством overflow: scroll hidden, которое, как я думаю, вы находясь в поиске? Если вы хотите вертикальную прокрутку.

Я никогда не использую фиксированный атрибут макета таблицы, что может показаться проблемой. Но опять же, я не использую его.

Просто назначьте таблицу CSS шириной: 100% и используйте @media с оберткой таблицы в зависимости от размера экрана. Это будет отлично работать и для адаптации колонки. Вам просто нужно будет соответственно отрегулировать.

Назначая встроенную ширину родительского div, вы создаете препятствие для ваших возможностей реагирования css, поскольку вы не можете переопределить встроенные стили. Я бы изменил этот подход.

#myTable {
  border-collapse: collapse;
  /* Collapse borders */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
  width: 100%;
  overflow: scroll hidden;
}

 .tbl_wrapper{max-width: 540px;}

@media screen and (max-width: 768px){
   <!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 540px;}
}

@media screen and (max-width: 1040px){
   <!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 640px;}
}


<div class="tbl_wrapper" style="background-color: #f0f0f0; padding: 5px;">
     <table id="myTable" cellspacing="0" cellpadding="2" border="1">
     </table>
</div>