Question

我有一个父表（id="test_table"），其中包含可变数量的嵌套表（class="table_col"）。嵌套表的数量可以变化（可以是2，可以是6）。我需要一种方法来使嵌套表在父表上的宽度全部相等。

我在嵌套表上尝试过float:left;和display:inline-block;。这样可以成功使嵌套表在父级上水平对齐，但是其宽度将固定为其内容。

父表上的

table-layout: fixed;不会影响布局。

我正在尝试以这种方式进行布局，而不是使用具有行和单元格的单个父表来使其更易于以后使用js / jQuery定位每个列。

<table id="test_table">
     <tr>
      <td>
       <table class="table_col">
        <tr>
         <td class="bgr_blue-01">Item</td>
        </tr>
        <tr>
         <td class="bgr_blue-01">Item</td>
        </tr>
       </table>
       <table class="table_col">
        <tr>
         <td class="bgr_blue-02">Item</td>
        </tr>
        <tr>
         <td class="bgr_blue-02">Item</td>
        </tr>
       </table>
       <table class="table_col">
        <tr>
         <td class="bgr_blue-03">Item</td>
        </tr>
        <tr>
         <td class="bgr_blue-03">Item</td>
        </tr>
       </table>
       <table class="table_col">
        <tr>
         <td class="bgr_blue-04">Item</td>
        </tr>
        <tr>
         <td class="bgr_blue-04">Item</td>
        </tr>
       </table>
       <table class="table_col">
        <tr>
         <td class="bgr_blue-05">Item</td>
        </tr>
        <tr>
         <td class="bgr_blue-05">Item</td>
        </tr>
       </table>
      </td>
     </tr>
    </table>

预期结果是宽度为100％的父表，其中包含相等宽度的嵌套表，这些表的数目可变（可以是2个嵌套表，可能是6个），可以填充父表。

Answer 1

您的问题有点不清楚。现在，所有表都与主表的宽度匹配。如果您希望他们赚100％，则将width: 100%;应用于所有表格。

请注意，您在主表中仅指定了一个包含多个表的列。

Answer 2

float: left仅在设置宽度后才有效

只需在CSS中设置属性

.table_col {
  float: left;
  width: 20%;
}

参见此处：https://jsfiddle.net/pue4gmt8/

但是，如果您的问题是表是以某种方式创建的，并且后端不能确定父表中有多少个子表，则需要一种计算宽度的方法。您可以根据后端逻辑计算宽度后，内联设置CSS width属性。另外，您可以使用Javascript或jQuery：

计算表数
获取父表的宽度
计算孩子的宽度表（父表宽度/子表数）
应用宽度子表

Answer 3

我找不到CSS解决方案，所以我使用了JS / jQuery。

function tableColWidth() {
  var tableColCount = $('.table_col').length
  console.log('table columns = ' + tableColCount);
  if (tableColCount == '2') {
    $(".table_col").css("width", "50%");
  }
  if (tableColCount == '3') {
    $(".table_col").css("width", "33.333333%");
  }
  if (tableColCount == '4') {
    $(".table_col").css("width", "25%");
  }
  if (tableColCount == '5') {
    $(".table_col").css("width", "20%");
  }
  if (tableColCount == '6') {
    $(".table_col").css("width", "16.666666%");
  }
}
tableColWidth();

table#comparison_table {
  width: 100%;
  border-collapse: inherit;
  border-spacing: 7.5px 4px;
}

table.table_col {
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="comparison_table">
  <tr>
    <td>
      <table class="table_col">
        <tr>
          <td>asdsad</td>
        </tr>
        <tr>
          <td>asdsa ad</td>
        </tr>
        <tr>
          <td>asdsaad</td>
        </tr>
      </table>
      <table class="table_col">
        <tr>
          <td>asas dsad</td>
        </tr>
        <tr>
          <td>asdsad</td>
        </tr>
        <tr>
          <td>asdsaaaad</td>
        </tr>
      </table>
      <table class="table_col">
        <tr>
          <td>asas dsad</td>
        </tr>
        <tr>
          <td>asdsad</td>
        </tr>
        <tr>
          <td>asdsaaaad</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

使父表中的多个子表相等宽度

3 个答案: