Question

我需要能够使myDiv的宽度与此表中的前3列相同。

var tableColumnWidth = document.getElementById('artworks').rows[0].cells[0].offsetWidth;
console.log(tableColumnWidth);

document.getElementById('myDiv').style.width = tableColumnWidth * 3 + "px";

我还有一个问题：

我正在考虑列的宽度并将其乘以3，如果列不相等，这将不起作用。所以我需要动态获取前3列的宽度。

这是我的小提琴：https://jsfiddle.net/gmnhswdg/7/

Answer 1

通常 div s会比表格给你更好的结果。考虑将所有这些分成两个容器，一个容纳4列中的第一个，下面是空白空间，占总宽度的25％，后者（占总宽度的75％）包含2个子类别，上面一个包含3列，最后一列包含文本。这就是我通常会做的事情，但如果您受到某些事情的限制或在编码方面有一些特殊需求，请告诉我，我会重新考虑它。

Answer 2

试试这个解决方案：

    var tableColumnWidth =0; 
            tableColumnWidth1 = jQuery('#artworks tr:first-child td:first-child').outerWidth();
            tableColumnWidth2 = jQuery('#artworks tr:first-child td:nth-child(2)').outerWidth();
            tableColumnWidth3 = jQuery('#artworks tr:first-child td:nth-child(3)').outerWidth();

            tableColumnWidth = tableColumnWidth1+tableColumnWidth2+tableColumnWidth3;
jQuery('#myDiv').outerWidth(tableColumnWidth + "px");

Answer 3

您发布的代码似乎使用的是纯JavaScript（DOM API），而不是jQuery，尽管链接的JS Fiddle演示中的代码使用jQuery的DOM就绪功能包装了该代码。所以，尽管存在jQuery，我还是选择提供一个简单的JavaScript解决方案：

// using Array.from() to convert the enclosed expression into
// an Array, from an Array-like NodeList:
var threeCellWidth = Array.from( 

  // here we use document.querySelectorAll() to retrieve a
  // non-live NodeList of elements using a CSS Selector:
  document.querySelectorAll(

    // that selector finds the first three <td> elements,
    // using the :nth-child() pseudo-class, within the
    // first <tr> of the <table> element identified by
    // its id of 'artworks':
    '#artworks tr:first-child td:nth-child(-n + 3)'
  )

// here we iterate over the Array of <td> elements, using
// Array.prototype.reduce(), to reduce that Array down to
// a single value, or a single Array element:
).reduce(function(a,b){
  // a: the current value of the accumulator that
  //    Array.prototype.reduce() produces, after
  //    the previous iteration,
  // b: the current Array-element (<td>) of the Array
  //    of elements over which we're iterating.

  // here we add the offsetWidth of the current <td>
  // to the existing accumulated value:
  return a + b.offsetWidth;

// 0: the initial starting-value of the accumulator:
},0);

// here we retrieve the element to style, and set its
// CSS width property-value to the result of the
// retrieved value, concatenating that number with
// 'px' to provide a valid value:
document.getElementById('myDiv').style.width = threeCellWidth + 'px';

var threeCellWidth = Array.from(
  document.querySelectorAll('#artworks tr:first-child td:nth-child(-n + 3)')
).reduce(function(a, b) {
  return a + b.offsetWidth;
}, 0);
document.getElementById('myDiv').style.width = threeCellWidth + 'px';

#myDiv {
  background: black;
  color: #fff;
  padding: 10px;
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}

<table id="artworks" style="width:100%">
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
</table>

<div id="myDiv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi
  reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores
  placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis.
  Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora,
  facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id.
</div>

在上面的代码片段中，您会注意到<div>几乎是合适的尺寸，但仍然太宽。这是设计使然，是计算宽度的结果，然后将padding添加到该宽度。

要更正<div>以确保<table>的前三列的确切宽度，我们只需更新#myDiv元素的CSS，添加：

box-sizing: border-box;

这会导致<div>的指定宽度包含padding和border宽度：

var threeCellWidth = Array.from(
  document.querySelectorAll('#artworks tr:first-child td:nth-child(-n + 3)')
).reduce(function(a, b) {
  return a + b.offsetWidth;
}, 0);
document.getElementById('myDiv').style.width = threeCellWidth + 'px';

#myDiv {
  background: black;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}

<table id="artworks" style="width:100%">
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
</table>

<div id="myDiv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi
  reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores
  placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis.
  Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora,
  facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id.
</div>

顺便说一下，由于Array.from()是您或您的用户可能无法使用的ES6功能，因此ES5方法将完全相同，但会替换以下行：

var threeCellWidth = Array.from(
  document.querySelectorAll('#artworks tr:first-child td:nth-child(-n + 3)')
).reduce(function(a, b) {
  return a + b.offsetWidth;
}, 0);

使用：

var threeCellWidth = Array.prototype.slice.call(
  document.querySelectorAll('#artworks tr:first-child td:nth-child(-n + 3)')
).reduce(function(a, b) {
  return a + b.offsetWidth;
}, 0);

var threeCellWidth = Array.prototype.slice.call(
  document.querySelectorAll('#artworks tr:first-child td:nth-child(-n + 3)')
).reduce(function(a, b) {
  return a + b.offsetWidth;
}, 0);
document.getElementById('myDiv').style.width = threeCellWidth + 'px';

#myDiv {
  background: black;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}

<table id="artworks" style="width:100%">
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
    <td>55577855</td>
  </tr>
</table>

<div id="myDiv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi
  reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores
  placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis.
  Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Sunt tempora, facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt tempora,
  facere pariatur eligendi reiciendis consectetur repellendus sint maiores placeat odit nisi fugiat quo unde porro omnis. Eaque ea ad id.
</div>

参考文献：

CSS：
- box-sizing。
- :nth-child()。
JavaScript的：
- Array.from()。
- Array.prototype.reduce()。
- Array.prototype.slice()。
- document.querySelectorAll()。
- Function.prototype.call()。
- HTMLElement.style。

Answer 4

您已经使用了jQuery，因此我们可以将代码更改为：

$( document ).ready(function() {
  resize();
  $(window).on('resize', function(){ resize(); });
});

function resize(){
  var tableColumnWidth = 0;
  $("#artworks tr:first td:lt(3)").each(function(){
    tableColumnWidth += $(this).outerWidth();
  });
  $("#myDiv").outerWidth(tableColumnWidth + "px");
}

Fiddle

动态地将div的宽度作为4列表中表的前3列？

4 个答案: