Question

我正在创建一个包含6列的表。第一列有一行文本，将是最宽的列。其余5列将包含带动态加载文本的标题，因此我事先并不知道宽度。

此表格采用Bootstrap（v3.3）设计，需要响应。

有没有办法将第一列调整为设置大小，然后根据最大文本值调整其余列的大小，使它们的宽度相同？

这是仅显示标题和第一行的表格。如您所见，标题列的宽度不同。

<table>
  <thead>
    <tr>
      <th></th>
      <th>Terrible</th>
      <th>Bad</th>
      <th>Average</th>
      <th>Good</th>
      <th>Excellent</th>
    </tr>
  </thead>
  <tr>
    <td>How was the food in the hotel</td>
    <td class="text-center">o</td>
    <td class="text-center">o</td>
    <td class="text-center">o</td>
    <td class="text-center">o</td>
    <td class="text-center">o</td>
  </tr>
</table>

这是demo fiddle

Answer 1

我希望这有帮助！

基本上，您可以通过JavaScript找到最宽的列，（忽略空列）以获得最大宽度。然后将列设置为该宽度。

见下面的小提琴：）

jQuery(document).ready(function(){
  var largestWidth;

  jQuery('.table').each(function(index, element){
    largestWidth = 0; // Reset the width for every table (presuming we want this to affect every table)

    jQuery(element).find('th').each(function(innerIndex, innerElement){
      console.log(largestWidth);
      if(jQuery(innerElement).width() > largestWidth && jQuery(innerElement).html() !== ''){
        largestWidth = jQuery(innerElement).width(); //Set to new highest width.
      }
    });

    jQuery(element).find('th:not(:first-child)').width(largestWidth + 'px'); // Set all but first column to highest width.
  });
});

https://jsfiddle.net/cetfghz4/4/

Answer 2

你可以使用类似的东西：

<tr>
   <th class="col-xs-2 col-sm-7"></th>
   <th class="col-xs-2 col-sm-1">Terrible</th>
   <th class="col-xs-2 col-sm-1">Bad</th>
   <th class="col-xs-2 col-sm-1">Average</th>
   <th class="col-xs-2 col-sm-1">Good</th>
   <th class="col-xs-2 col-sm-1">Excellent</th>
</tr>

demo fiddle

您必须付出更多努力才能使列标题响应（例如正确的媒体查询以垂直放置标题文本），但此解决方案将适用于列宽问题。

它是一个引导本机类，您可以找到更多文档here

我希望它可以提供帮助

Answer 3

使它成为一个奇特的派对，使用flexbox：

<div class="flex-row">
    <div class="question">Some question</div>
    <div class="option">Option</div>
    <div class="option">Option</div>
    <div class="option">Option</div>
    <div class="option">Option</div>
    <div class="option">Option</div>
</div>

.flex-row {
    display: flex;
}

.question {
    flex: 5;
}

.option {
    flex: 1;
}

列大小匹配的html表

3 个答案: