具有rowspan和table-layout fixe时的表列宽度

时间:2017-08-16 19:31:41

标签: css html-table width

我坚持修复html表格第二列的宽度。

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

Table Image

以下是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的宽度,尽管它应该被视为第二列。

Table HTML code

我该如何解决这个问题?

我尝试按如下方式应用列定义宽度,但不起作用:

 $( '<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") )

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您已经拥有TD元素的课程。您可以使用这些直接定位列。我改变了规则的顺序,以便根据特异性适当地覆盖。

function currentYPosition() {
  if (self.pageYOffset) return self.pageYOffset;
  if (document.documentElement && document.documentElement.scrollHeight) return document.documentElement.scrollHeight;
  if (document.body.scrollHeight) return document.body.scrollHeight;

  return 0;
}

function elmYPosition(eID) {
  let elm = document.getElementById(eID);
  let y = elm.offsetHeight;
  let node = elm;
  while (node.offsetParent && node.offsetParent != document.body) {
    node = node.offsetParent;
    y += node.offsetHeight;
  }
  return y;
}

export default function smoothScroll(eID, string) {
  let startY = currentYPosition();
  let stopY = elmYPosition(eID);
  let distance = stopY > startY ? stopY - startY : startY - stopY;
  let speed = Math.round(distance / 10);
  let speedTimeout = 250;
  if (speed >= 100) speed = 100;
  if (string) speed = 1;
  let step = Math.round(distance / 25);
  let leapY = stopY > startY ? startY + step : startY - step;
  let timer = 0;
  if (stopY > startY) {
    for (let i = startY; i < stopY; i += step) {
      setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
      leapY += step;
      if (leapY > stopY) leapY = stopY;
      timer++;
    }
    return;
  }
  for (let i = startY; i > stopY; i -= step) {
    setTimeout('window.scrollTo(0, ' + (leapY) + ')', timer * speed);
    leapY -= step;
    if (leapY < stopY){
      leapY = stopY;
    } 
    timer++;
  }
}