html - 强制 HTML 表格超过 div 宽度 : CSS

Question

这个问题问的是通常需要的相反:超过其父 div 宽度的固定宽度表格。

事实上，以下实现在基于 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 隐藏属性创建滚动条效果，这就是我认为的寻找？如果你想要垂直滚动。

我从不使用 table-layout fixed 属性，这似乎是个问题。但我又一次不使用它。

只需在 width:100% 处分配表格 CSS，并根据屏幕尺寸将 @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>