使用 javascript 根据另一个 table 中的行数更改 table 宽度

Question

我的 Html 页面有 2 tables :

第一个 table 与 class='af_column_column-header-table' and id='Table1'`。
第二个table.

css :

.af_column_column-header-table { 
     width = 100% !important;
 }

问题：

如果第二个table有多于一行那么将第一个 table 宽度设置为 99.3%。
我只想在第一次 table 时这样做。

PS：我的页面上有很多table使用相同的样式class af_column_column-header-table.

Answer 1

您可以在 :first-child 的帮助下使用 querySelectorAll 到 select 第一个 table，然后使用 .style.width 设置样式：

var rows_count = document.querySelectorAll('table.af_column_column-header-table:first-child tr').length;

if( rows_count > 1){
  document.getElementById('Table1').style.width = '99.3%';
}

i have many tables on my page that uses the same style class af_column_column-header-table i want to do that for the first table only.

这将通过使用 :first-child select 或

来实现

使用 javascript 根据另一个 table 中的行数更改 table 宽度

Change table width based on number of rows in another table using javascript

javascript

css

css-tables