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包装器，并基于包装器的最大宽度分配表的width：100％，然后将创建带有overflow：scroll hidden属性的滚动条效果，这就是我想的寻找？如果要垂直滚动。

我从不使用似乎是问题所在的table-layout固定属性。但是再次，我不使用它。

只需将表CSS分配为width：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>

强制HTML表格超过div宽度：CSS

1 个答案: