固定行跨度和表格布局时的表格列宽

Posted 2023-03-05

【中文标题】固定行跨度和表格布局时的表格列宽

【英文标题】：Table column width when having rowspan and table-layout fixe

【发布时间】：2018-01-25 01:42:48

【问题描述】：

我一直在固定我的 html 表格的第二列的宽度。

下面是我的桌子的打印屏幕：

下面是 CSS 代码：

#RevenueMTable tbody, #RevenueMTable thead 
display: block; 


#RevenueMTable 
    width: 1115px;
    table-layout: fixed !important;


#RevenueMTable tbody td:first-child

    width: 138px !important;


#RevenueMTable tbody td:not(:first-child)
  
    width: 72px !important;



#RevenueMTable tbody

   overflow: auto;
   height: 400px;

问题是我的第一列有 4 行的行跨度。因此，例如包含“COST”的单元格是行标签中的第一个 TD 元素，因此也应用了 138px 的宽度，尽管它应该被视为第二列。

我该如何解决这个问题？

我尝试如下应用列定义宽度，但也不起作用：

 $( '<col style="width:138px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"> <col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px"><col style="width:72px">').insertBefore( $("#RevenueMTable thead") )

【问题讨论】：

能否请您也提供 HTML 以便更快地解决问题，如果可能的话，请提供一个突出问题的 jsfiddle。

【参考方案1】：

您已经有关于 TD 元素的类。您可以使用这些直接定位列。我更改了规则的顺序，因此它们将根据具体情况正确覆盖。

#RevenueMTable tbody td
  
    width: 72px !important;



#RevenueMTable tbody td.column0 
    width: 138px !important;

【参考方案2】：

  #RevenueMTable tbody td:nth-child(2)
    
      width: 72px !important;
  

【讨论】：

您能否简要解释一下为什么这可以解决 OPs 问题？

td:nth-child(2) 表示第二列，如果要指定第三列，则类似于 #RevenueMTable tbody td:nth-child(3) 等等。

请更新你的答案并附上简短的解释 :) 在 SO，只有代码的答案经常被标记为“低质量”并被审核（因此，为什么我看到你的答案。）通常，仅代码答案不能提供足够的信息/上下文来真正帮助用户（或未来的网站访问者）。