为什么在隐藏某些列时忽略了colgroup宽度百分比？

Question

我有一个表，第2列到第7列是隐藏的，而其他人则通过colgroup方法分配了宽度百分比。无论出于何种原因，width百分比都会被忽略。但是，如果我＆＃34;取消隐藏＆＃34;第2-7列，将百分比考虑在内。

如何强制浏览器尊重列2-7隐藏的宽度？

＆＃13;

＆＃13;

table, th, td {
   border: 1px solid black;
}

.widget-comparables-table {
  width: 100%;
}

.widget-comparables-table tr > *:nth-child(2),
.widget-comparables-table tr > *:nth-child(3),
.widget-comparables-table tr > *:nth-child(4),
.widget-comparables-table tr > *:nth-child(5),
.widget-comparables-table tr > *:nth-child(6),
.widget-comparables-table tr > *:nth-child(7) {
  display: none;
}


.widget-comparable-col-prop-summary {
  width: 59%;
}

.widget-comparable-col-prop-sales {
  width: 39%;
}

＆＃13;

<div style="width: 500px; background-color:green">
  <table class="widget-comparables-table">
    <colgroup>
      <col />
      <col class="widget-comparable-col-address" />
      <col class="widget-comparable-col-sold-price" />
      <col class="widget-comparable-col-sold-date" />
      <col class="widget-comparable-col-beds" />
      <col class="widget-comparable-col-baths" />
      <col class="widget-comparable-col-sqft" />
      <col class="widget-comparable-col-prop-summary" />
      <col class="widget-comparable-col-prop-sales" />
    </colgroup>

    <tr class="widget-comparables-main-property-row">
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
      <td>col5</td>
      <td>col6</td>
      <td>col7</td>
      <td>col8</td>
      <td>col9</td>
    </tr>
  </table>
</div>  

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以修改它：

.widget-comparable-col-prop-summary {
  width: 59%;
}
.widget-comparable-col-prop-sales {
  width: 39%;
}

使用：

.widget-comparables-table tr > *:nth-child(8) {
  width: 59%;
}
.widget-comparables-table tr > *:nth-child(9) {
  width: 39%;
}

我不熟悉colgroup标签，所以我无法给你一个深刻的解释。但在w3schools HTML < colgroup > width Attribute中，我看到了这些兼容性说明：

  

＆lt;的宽度属性colgroup＆gt; HTML5不支持。

     

使用CSS代替。 CSS语法：＆lt; td style =“width：200px”＆gt;

摘录：

table, th, td {
   border: 1px solid black;
}

.widget-comparables-table {
  width: 100%;
}

.widget-comparables-table tr > *:nth-child(2),
.widget-comparables-table tr > *:nth-child(3),
.widget-comparables-table tr > *:nth-child(4),
.widget-comparables-table tr > *:nth-child(5),
.widget-comparables-table tr > *:nth-child(6),
.widget-comparables-table tr > *:nth-child(7) {
  display: none;
}


.widget-comparables-table tr > *:nth-child(8) {
  width: 59%;
}

.widget-comparables-table tr > *:nth-child(9) {
  width: 39%;
}

<div style="width: 500px; background-color:green">
  <table class="widget-comparables-table">
    <colgroup>
      <col />
      <col class="widget-comparable-col-address" />
      <col class="widget-comparable-col-sold-price" />
      <col class="widget-comparable-col-sold-date" />
      <col class="widget-comparable-col-beds" />
      <col class="widget-comparable-col-baths" />
      <col class="widget-comparable-col-sqft" />
      <col class="widget-comparable-col-prop-summary" />
      <col class="widget-comparable-col-prop-sales" />
    </colgroup>

    <tr class="widget-comparables-main-property-row">
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
      <td>col5</td>
      <td>col6</td>
      <td>col7</td>
      <td>col8</td>
      <td>col9</td>
    </tr>
  </table>
</div>