html - 为什么隐藏某些列时会忽略 colgroup 宽度百分比？

Question

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

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

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%;
}

<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>  

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我看到了这些兼容性说明:

The width attribute of < colgroup > is not supported in HTML5.

Use CSS instead. CSS syntax: < td style="width:200px" >

片段:

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>