title: How do I fit the td width of different tables?
body: <p>The width of the actual <strong>td</strong> is a real number, but I do not know if <code>offsetWidth</code> returns only integers. Are there any other properties that return the length of the cell in real number? In chrome's developer tools, press the <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>C</kbd> shortcut to see the length, which is different. Can I make it easier to get to the length if I use jQuery?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fitWidth(selector1, selector2) {
    console.log('fitWidth is excuted');
    let tableHeadElements = document.getElementsByClassName(selector1);
    let tableBodyElements = document.getElementsByClassName(selector2);
    for (let i = 0; i &lt; 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 &lt; 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 &gt; bodyCell.clientWidth ? bodyCell.style.width = headCell.clientWidth + "px" : headCell.style.width = bodyCell.clientWidth + "px";
        }
      }
    }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table border="1"&gt;
      &lt;thead id="a" class="queue-head"&gt;
        &lt;tr&gt;
          &lt;td&gt;AppName&lt;/td&gt;
          &lt;td&gt;QueueName&lt;/td&gt;
          &lt;td&gt;Server&lt;/td&gt;
          &lt;td&gt;Service&lt;/td&gt;
          &lt;td&gt;ReceptionCount&lt;/td&gt;
          &lt;td&gt;ProcessingCount&lt;/td&gt;
          &lt;td&gt;QueueCount&lt;/td&gt;
          &lt;td&gt;Limit&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/table&gt;
    &lt;table border="1"&gt;
      &lt;tbody id="b" class="queue-body"&gt;
        &lt;tr&gt;
          &lt;td&gt;ABC&lt;/td&gt;
          &lt;td&gt;ABCDEFGHI&lt;/td&gt;
          &lt;td&gt;abcd01&lt;/td&gt;
          &lt;td&gt;9999&lt;/td&gt;
          &lt;td&gt;400&lt;/td&gt;
          &lt;td&gt;999&lt;/td&gt;
          &lt;td&gt;20000&lt;/td&gt;
          &lt;td&gt;2000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;ABC&lt;/td&gt;
          &lt;td&gt;ABCDEFGHI&lt;/td&gt;
          &lt;td&gt;abcd01&lt;/td&gt;
          &lt;td&gt;9999&lt;/td&gt;
          &lt;td&gt;400&lt;/td&gt;
          &lt;td&gt;999&lt;/td&gt;
          &lt;td&gt;20000&lt;/td&gt;
          &lt;td&gt;2000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;hr /&gt;
  
    &lt;table border="1"&gt;
      &lt;thead class="queue-head"&gt;
        &lt;tr&gt;
          &lt;td&gt;AppName&lt;/td&gt;
          &lt;td&gt;QueueName&lt;/td&gt;
          &lt;td&gt;Server&lt;/td&gt;
          &lt;td&gt;Service&lt;/td&gt;
          &lt;td&gt;ReceptionCount&lt;/td&gt;
          &lt;td&gt;ProcessingCount&lt;/td&gt;
          &lt;td&gt;QueueCount&lt;/td&gt;
          &lt;td&gt;Limit&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/table&gt;
    &lt;table border="1"&gt;
      &lt;tbody class="queue-body"&gt;
        &lt;tr&gt;
          &lt;td&gt;A22&lt;/td&gt;
          &lt;td&gt;ABCDEFGHI&lt;/td&gt;
          &lt;td&gt;abcd01&lt;/td&gt;
          &lt;td&gt;9999&lt;/td&gt;
          &lt;td&gt;400&lt;/td&gt;
          &lt;td&gt;999&lt;/td&gt;
          &lt;td&gt;20000&lt;/td&gt;
          &lt;td&gt;2000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;A22&lt;/td&gt;
          &lt;td&gt;ABCDEFGHI&lt;/td&gt;
          &lt;td&gt;abcd01&lt;/td&gt;
          &lt;td&gt;9999&lt;/td&gt;
          &lt;td&gt;400&lt;/td&gt;
          &lt;td&gt;999&lt;/td&gt;
          &lt;td&gt;20000&lt;/td&gt;
          &lt;td&gt;2000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;hr /&gt;
    &lt;button onclick='fitWidth("queue-head", "queue-body");'&gt;fit width&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>