1. How to Adapt Different Table <td> Widths? #

There are several practical approaches to align or adjust <td> widths across tables, depending on your needs:

• CSS Fixed Layout: Use table-layout: fixed on your tables to enforce explicit width values, instead of letting content auto-size columns. This is perfect for keeping columns aligned across multiple tables:

  .target-table {
    table-layout: fixed;
    width: 100%; /* Or a fixed pixel value */
  }
  .target-table td:nth-child(1) {
    width: 25%; /* Set consistent width for first column */
  }
  .target-table td:nth-child(2) {
    width: 50%; /* Second column width */
  }
  

• Dynamic JavaScript Matching: If you need to sync column widths between two tables (like your fitWidth function), calculate precise widths from a source table and apply them to the target. Here’s an enhanced version of your code:

  function fitWidth(selector1, selector2) {
    console.log('fitWidth is executed');
    const sourceCells = document.querySelectorAll(`.${selector1} td`);
    const targetCells = document.querySelectorAll(`.${selector2} td`);
    
    if (sourceCells.length !== targetCells.length) return;
    
    sourceCells.forEach((cell, index) => {
      // Get precise fractional width
      const exactWidth = cell.getBoundingClientRect().width;
      targetCells[index].style.width = `${exactWidth}px`;
    });
  }
  

• Responsive Bounds: Use min-width and max-width to let columns flex within limits while maintaining consistency:

  td {
    min-width: 120px;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

2. Getting Precise (Non-Integer) <td> Widths #

Does offsetWidth only return integers? #

Yes, offsetWidth returns an integer because it represents the rounded pixel width of the element’s layout box (including padding, border, and scrollbar if present). Browsers round this value to whole pixels for layout rendering.

Properties for Real-Number Widths #

To get the exact fractional pixel width (matching what you see in Chrome DevTools), use Element.getBoundingClientRect().width. This method returns a floating-point number that accounts for sub-pixel rendering—this is the precise value you see when inspecting elements with Ctrl+Shift+C.

Using jQuery for Easier Access #

jQuery simplifies accessing precise widths with built-in methods that return floating-point values:

• $(tdElement).width(): Returns content width (excludes padding/border)
• $(tdElement).outerWidth(): Returns width including padding and border
• $(tdElement).outerWidth(true): Includes margin as well

Here’s how to rewrite your fitWidth function with jQuery:

function fitWidth(selector1, selector2) {
  console.log('fitWidth is executed');
  const $sourceCells = $(`.${selector1} td`);
  const $targetCells = $(`.${selector2} td`);
  
  if ($sourceCells.length !== $targetCells.length) return;
  
  $sourceCells.each((index, cell) => {
    const exactWidth = $(cell).outerWidth(); // Use outerWidth for full layout width
    $targetCells.eq(index).css('width', `${exactWidth}px`);
  });
}

The value shown in Chrome DevTools’ "Computed" tab is exactly what getBoundingClientRect().width (or jQuery’s width methods) returns—this is the true computed width, including sub-pixel adjustments from CSS or responsive layouts.

内容的提问来源于stack exchange，提问作者YunjinJang