强制HTML表超过DIV宽度:CSS

Question

这个问题是问通常需要的 对面：超过其父级宽度的固定宽度表。

实际上，以下实现在基于铬/铬的浏览器中按预期工作：

#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时，指定的表/列宽度未得到尊重，而是符合父级。

我发现的最建议的解决方案似乎建议将table-layout: fixed;规则应用于表格，但是，在此示例中已经应用了无效。

有人有任何想法吗？

Answer 1

通常我使用类/id包装器，并基于包装器的最大宽度分配表的宽度：100％，然后将其scrollbar效应与溢出：scroll hidden属性：我认为哪个是什么？如果您想要垂直滚动。

我从来没有使用固定的固定属性，这似乎是问题所在。

只需在宽度上分配表CSS：100％，然后根据屏幕尺寸将@Media与表的包装器一起使用。这也适用于专栏的改编。您只需要相应调整。

通过分配父级的宽度内联，您正在为您的响应式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>