使col-auto在多行之间具有相同的宽度

Question

假设我有以下行：

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
</div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
</div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
</div>

这会产生：

我希望实现的目标：

我可以采取什么方法来确保列在这些不同的行之间保持相同的宽度，以便它们都成为最大列的宽度？

Answer 1

您可以尝试像这样的display：table：

.container {
  display: table;
}

.container>.row {
  display: table-row;
}

.container>.row>* {
  display: table-cell;
  padding:5px;
  white-space:nowrap;
}
.col {
 width:100%;
}

<div class="container">

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
  </div>
</div>

Answer 2

尝试一下。

使用设置为填充整个宽度的表。设置col1占用所有可用空间。因为它是一个表，所以其他2列将正常工作。 将表格单元格中的文本设置为不换行，以便您可以流畅地查看文本。

.custom-table {
    border: 0;
    width: 100%;
}

.col-wide {
    width: 100%;
}

.row td {
    white-space: nowrap;
    padding: 5px;
}

<table class="custom-table">
  <tr class="row">
    <td class="col-wide">Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>

  <tr class="row">
    <td class="col-wide">Row 1</td>
    <td>Row 2 longest one ffdssdgg</td>
    <td>Row 3 longest one</td>
  </tr>

  <tr class="row">
    <td class="col-wide">Row 1</td>
    <td>Row 2 shorter</td>
    <td>Row 3 shorter</td>
  </tr>
</table>

任何问题，大声喊叫。

Answer 3

也许您可以使用display: grid。

然后您可以根据需要设置行样式。

.container>.row {
 display: grid;
 grid-template-columns: 50% auto auto;
 padding: 5px;
}

<div class="container">

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
  </div>
</div>

Answer 4

使用网格显示：

    <style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto ;
  grid-gap: 10px;
}
.grid-container > div {
  text-align: left;
  padding: 20px 0;
}
</style>


<div class="grid-container">
  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
  </div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
</div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
  </div>
</div>

Answer 5

只需使用col-sm- *代替col-auto。

Answer 6

如果我理解正确，那感觉就像您混淆了行和列。如果可能的话，请尝试稍微更改布局以在不使用JS的情况下实现所需的输出：

.wrap { display: flex; }
.col-full { flex: 1; }

<div class="wrap">
  <div class="col-full">
      <div class="row">Row 1</div>
      <div class="row-auto">Row 2</div>
      <div class="row-auto">Row 3</div>
  </div>

  <div class="col">
      <div class="row">Row 1</div>
      <div class="row">Row 2 longest one</div>
      <div class="row-auto">Row 3 shorter</div>
  </div>

  <div class="col">
      <div class="row">Row 1</div>
      <div class="row">Row 2 shorter</div>
      <div class="row">Row 3 longest one</div>
  </div>
</div>

Answer 7

使用没有边框的表格，例如：

＆＃13;

＆＃13;

<table border="0">
  <tr>
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>


<tr>
    <td>Row 1</td>
    <td>Row 2 longest one</td>
    <td>Row 3 longest one</td>
</tr>

<tr>
    <td>Row 1</td>
    <td>Row 2 shorter</td>
    <td>Row 3 shorter</td>
</tr>

＆＃13;

＆＃13;

＆＃13;