Question

我继承了这个以老式方式处理事情的项目。例如，它使用表格进行布局，这已经足够糟糕，但随后它将标题和内容拆分为两个单独的表格（请参阅我的代码片段）。

重新编写标记并不实际，因此解决方案必须是JavaScript，并且可能与CSS结合使用。请记住，我为此目的大大简化了问题，以减少混乱;实际上，问题延伸到许多不同的文件。

使用JavaScript（请参阅代码段），我能够与主体对齐标题。我们的想法是等到页面加载，找到body元素的宽度，然后将它们应用到标题中，使其看起来像一个表。正如您所看到的，它并不完全匹配。这部分是因为CSS边界，但生活很混乱，边界发生。删除所有额外的CSS只是为了使事情排成一行是不现实的。

你能帮我把这些桌子排成一排，看起来像一张桌子吗？

编辑：

为了更清楚地了解需求，需要根据主体表中内容的宽度动态调整表的大小。内容可能会发生变化，因此硬编码宽度是不够的。

window.onload = function() {
  var bodyCols = document.getElementsByClassName('bodyCol');
  var headCols = document.getElementsByClassName('headCol');

  for (var i=0; i<bodyCols.length; i++) {
    headCols[i].style.minWidth = bodyCols[i].offsetWidth + 'px';
  }
}

#headTable {
  width: 100%;
}

.headCol { 
  border: 5px solid red;
}

#bodyTable {
  width: 100%;
}

.bodyCol { 
  border: 5px solid blue;
}

<table id="headTable">
  <tbody>
    <tr>
      <td class="headCol">
        Hey!
      </td>
      <td class="headCol">
        Wait!
      </td>
      <td class="headCol">
        I've got a new complaint
      </td>
    </tr>
  </tbody>
</table>
<table id="bodyTable">
  <tbody>
    <tr>
      <td class="bodyCol">
        Forever in debt
      </td>
      <td class="bodyCol">
        to your priceless
      </td>
      <td class="bodyCol">
        advice
      </td>
    </tr>
  </tbody>
</table>

Answer 1

以下是使用纯JavaScript的解决方案。

var bodyCols = document.querySelectorAll('.bodyCol');
var headCols = document.querySelectorAll('.headCol');

for(var i = 0; i < bodyCols.length; i++){
    console.log(headCols[i]);
  headCols[i].style.width = window.getComputedStyle(bodyCols[i]).width;
}

参见工作示例：https://jsfiddle.net/pbjzmanc/

Answer 2

我花了一些时间在这上面并提出了一个jQuery解决方案。现在，我没有在问题中提到jQuery，理想情况下，我不会仅仅为了这个问题而将它包含在我的项目中。但是，它确实很好地解决了这个问题，而且我不知道如何做到这一点。我将暂时将此标记为正确的答案，希望有人可以告诉我如何使用纯JavaScript进行此操作。

＆＃13;

$(function() {  
  $('.bodyCol').each(function(index) {
    $('.headCol:eq(' + index + ')').innerWidth($(this).innerWidth());
  });
});

＆＃13;

#headTable {
  width: 100%;
}

.headCol { 
  border: 5px solid red;
}

#bodyTable {
  width: 100%;
}

.bodyCol { 
  border: 5px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="headTable">
  <tbody>
    <tr>
      <td class="headCol">
        Hey!
      </td>
      <td class="headCol">
        Wait!
      </td>
      <td class="headCol">
        I've got a new complaint
      </td>
    </tr>
  </tbody>
</table>
<table id="bodyTable">
  <tbody>
    <tr>
      <td class="bodyCol">
        Forever in debt
      </td>
      <td class="bodyCol">
        to your priceless
      </td>
      <td class="bodyCol">
        advice
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

如何使用JavaScript和offsetWidth排列表格？

2 个答案: