如何拟合不同表格的td宽度？

时间：2018-05-08 03:55:22

标签： javascript html css

实际 td 的宽度是实数，但我不知道offsetWidth是否只返回整数。是否有任何其他属性以实数返回单元格的长度？在chrome的开发人员工具中，按 CTRL + SHIFT + C 快捷方式查看长度，这是不同的。如果我使用jQuery，我可以更容易达到长度吗？

function fitWidth(selector1, selector2) {
  console.log('fitWidth is excuted');
  let tableHeadElements = document.getElementsByClassName(selector1);
  let tableBodyElements = document.getElementsByClassName(selector2);
  for (let i = 0; i < tableHeadElements.length; i++) {
    let tableDataOfFirstHeadTableRow = tableHeadElements[i].firstElementChild.children; // head의 첫번째 tr
    let tableDataOfFirstBodyTableRow = tableBodyElements[i].firstElementChild.children; // body의 첫번째 tr
    console.log("body tr count: " + tableDataOfFirstBodyTableRow.length);
    for (let j = 0; j < tableDataOfFirstHeadTableRow.length; j++) {
      let headCell = tableDataOfFirstHeadTableRow[j];
      let bodyCell = tableDataOfFirstBodyTableRow[j];
      console.log("head-cell width: " + headCell.clientWidth, "body-cell width: " + bodyCell.clientWidth);
      /*
      headCell.style.width = (bodyCell.offsetWidth) + "px";
      headCell.style.width = (bodyCell.scrollWidth) + "px";
      */
      if (headCell.clientWidth != bodyCell.clientWidth) {
        headCell.clientWidth > bodyCell.clientWidth ? bodyCell.style.width = headCell.clientWidth + "px" : headCell.style.width = bodyCell.clientWidth + "px";
      }
    }
  }
};
<!DOCTYPE HTML>
<html>

<head>

</head>

<body>
  <table border="1">
    <thead id="a" class="queue-head">
      <tr>
        <td>AppName</td>
        <td>QueueName</td>
        <td>Server</td>
        <td>Service</td>
        <td>ReceptionCount</td>
        <td>ProcessingCount</td>
        <td>QueueCount</td>
        <td>Limit</td>
        <td></td>
      </tr>
    </thead>
  </table>
  <table border="1">
    <tbody id="b" class="queue-body">
      <tr>
        <td>ABC</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
      <tr>
        <td>ABC</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <hr />

  <table border="1">
    <thead class="queue-head">
      <tr>
        <td>AppName</td>
        <td>QueueName</td>
        <td>Server</td>
        <td>Service</td>
        <td>ReceptionCount</td>
        <td>ProcessingCount</td>
        <td>QueueCount</td>
        <td>Limit</td>
        <td></td>
      </tr>
    </thead>
  </table>
  <table border="1">
    <tbody class="queue-body">
      <tr>
        <td>A22</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
      <tr>
        <td>A22</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <hr />
  <button onclick='fitWidth("queue-head", "queue-body");'>fit width</button>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

您应该使用getBoundingClientRect()返回非舍入数字。

offsetWidth和clientWidth都返回一个舍入的整数。这些页面说明：

  

注意：此属性将值舍入为整数。如果需要小数值，请使用element.getBoundingClientRect（）。

答案 1 :(得分：0)

有几个解决方案。

让我们先从问题开始。

您正在使用根据文档中的my_data %>% mutate_at(vars(b,c,e,f), replace_na, 0) 。

  

clientWidth属性返回元素的可视宽度（以像素为单位），包括填充，但不返回边框，滚动条或边距。

因此，当您将元素的clientWidth分配给另一个宽度时，它也会添加填充，这是我们想要的，但如果我们有任何边框，则会忽略边框，这就是正在发生的事情。

现在，如果我们删除填充，则如果两个单元格具有相同的边框宽度，即使我们添加my_data %>% mutate_at(c('b','c','e','f'), replace_na, 0) ，因为clientWidth不考虑边框，也没有区别。

转到clientWidth。

  

offsetWidth属性返回元素的可视宽度（以像素为单位），包括填充，边框和滚动条，但不返回边距。

现在这个看起来很完美，因为它也包含了边框和滚动条，因此添加box-sizing: border-box;会有效。

offsetWidth
box-sizing: border-box;
function fitWidth(selector1, selector2) {
  console.log('fitWidth is excuted');
  let tableHeadElements = document.getElementsByClassName(selector1);
  let tableBodyElements = document.getElementsByClassName(selector2);
  for (let i = 0; i < tableHeadElements.length; i++) {
    let tableDataOfFirstHeadTableRow = tableHeadElements[i].firstElementChild.children; // head의 첫번째 tr
    let tableDataOfFirstBodyTableRow = tableBodyElements[i].firstElementChild.children; // body의 첫번째 tr
    console.log("body tr count: " + tableDataOfFirstBodyTableRow.length);
    for (let j = 0; j < tableDataOfFirstHeadTableRow.length; j++) {
      let headCell = tableDataOfFirstHeadTableRow[j];
      let bodyCell = tableDataOfFirstBodyTableRow[j];
      console.log("head-cell width: " + headCell.offsetWidth, "body-cell width: " + bodyCell.offsetWidth);
      /*
      headCell.style.width = (bodyCell.offsetWidth) + "px";
      headCell.style.width = (bodyCell.scrollWidth) + "px";
      */
      if (headCell.offsetWidth != bodyCell.offsetWidth) {
        headCell.offsetWidth > bodyCell.offsetWidth ? bodyCell.style.width = headCell.offsetWidth + "px" : headCell.style.width = bodyCell.offsetWidth + "px";
      }
    }
  }
};

或者您可以自己计算宽度。

如指出Here

如果div有此定义

*{
    box-sizing: border-box;
}
td{
    max-width:100px;
    white-space: nowrap;
    overflow-x: scroll;
}

它的宽度将是。

<table border="1">
    <thead id="a" class="queue-head">
      <tr>
        <td>AppName</td>
        <td>QueueName</td>
        <td>Server</td>
        <td>Service</td>
        <td>ReceptionCount</td>
        <td>ProcessingCount</td>
        <td>QueueCount</td>
        <td>Limit</td>
        <td></td>
      </tr>
    </thead>
  </table>
  <table border="1">
    <tbody id="b" class="queue-body">
      <tr>
        <td>ABC</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
      <tr>
        <td>ABC</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <hr />

  <table border="1">
    <thead class="queue-head">
      <tr>
        <td>AppName</td>
        <td>QueueName</td>
        <td>Server</td>
        <td>Service</td>
        <td>ReceptionCount</td>
        <td>ProcessingCount</td>
        <td>QueueCount</td>
        <td>Limit</td>
        <td></td>
      </tr>
    </thead>
  </table>
  <table border="1">
    <tbody class="queue-body">
      <tr>
        <td>A22</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
      <tr>
        <td>A22</td>
        <td>ABCDEFGHI</td>
        <td>abcd01</td>
        <td>9999</td>
        <td>400</td>
        <td>999</td>
        <td>20000</td>
        <td>2000</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <hr />
  <button onclick='fitWidth("queue-head", "queue-body");'>fit width</button>
相关问题
最新问题