如何将列缩小到所有行中该列的最大宽度，例如 table 中的 td 宽度？

Question

我想用 flexbox 个元素替换 table。

基本上是这样的：

<table>
  <tr>
    <td>row_1.col_1</td>
    <td>row_1.col_2</td>
  </tr>
  <tr>
    <td>row_2.col_1.with_longer_content</td>
    <td>row_2.col_2</td>
  </tr>
</table>

为此：

<div>
  <div>
    <div>row_1.col_1</div>
    <div>row_1.col_2</div>
  </div>
  <div>
    <div>row_2.col_1.with_longer_content</div>
    <div>row_2.col_2</div>
  </div>
</div>

在 table 的情况下，第一行的第一个单元格的宽度将扩大，以便第二个单元格 row_1.col_2 将与其下方的单元格正确对齐 row_2.col_2

-------------------------------------------------
| row_1.col_1                     | row_1.col_2 |
| row_2.col_1.with_longer_content | row_2.col_2 |
-------------------------------------------------

如何使用 flexbox 对 div 做同样的事情，以便第一列占用最少的宽度，但第二列仍然对齐？

这可能吗？

我之所以要这样做是因为我希望每一行都是一个类星体q-card，但是其中的元素应该与上面和下面的卡片对齐，但仍然消耗最少的space 并且不受“12 列”网格系统的宽度控制。

基本上是这样，我需要将徽章和输入对齐，就好像它是 table（我不能使用 q-table，并且 - 由于使用了 UMD - - 也不是 q-markup-table):

<q-card>
  <q-card v-for='element in elements'>
    <q-badge>{{element.badge}}</q-badge>
    <q-input v-model='element.text'></q-input>
  </div>
</div>

Answer 1

使用 display: flexbox 您可以通过按列而不是按行来组织数据来做到这一点。使用 display: table 您可以维护 table 的结构。示例：

.flex-table {
  display: flex;
}

.column {
  padding: 4px;
}

.table {
  display: table;
}

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

.table-cell {
  display: table-cell;
  padding: 0 4px;
}

<h3>table</h3>

<table>
  <tr>
    <td>row_1.col_1</td>
    <td>row_1.col_2</td>
  </tr>
  <tr>
    <td>row_2.col_1.with_longer_content</td>
    <td>row_2.col_2</td>
  </tr>
</table>

<h3>flexbox table</h3>

<div class="flex-table">
  <div class="column">
    <div>row_1.col_1</div>
    <div>row_2.col_1.with_longer_content</div>
  </div>
  <div class="column">
    <div>row_1.col_2</div>
    <div>row_2.col_2</div>
  </div>
</div>

<h3>display table</h3>

<div class="table">
  <div class="table-row">
    <div class="table-cell">row_1.col_1</div>
    <div class="table-cell">row_1.col_2</div>
    
  </div>
  <div class="table-row">
    <div class="table-cell">row_2.col_1.with_longer_content</div>
    <div class="table-cell">row_2.col_2</div>
  </div>
</div>

Answer 2

而不是 flex，使用 display:table

可能会更好

div {
  display: table;
}

div>div {
  display: table-row;
}

div>div>div {
  display: table-cell;
}

<div>
  <div>
    <div>row_1.col_1</div>
    <div>row_1.col_2</div>
  </div>
  <div>
    <div>row_2.col_1.with_longer_content</div>
    <div>row_2.col_2</div>
  </div>
</div>

Answer 3

<style>
    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .col {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .text-wrap {
        white-space: normal !important;
    }
</style>

<div>
    <div class="row">
        <div class="col text-wrap">row_1.col_1</div>
        <div class="col text-wrap">row_1.col_2</div>
    </div>
    <div class="row">
        <div class="col text-wrap">row_2.col_1.with_longer_content</div>
        <div class="col text-wrap">row_2.col_2</div>
    </div>
</div>

尝试这样写 & 如果您不想使用上述样式，请改用 bootstrap css link。

如何将列缩小到所有行中该列的最大宽度，例如 table 中的 td 宽度？

How to shrink column to max width of that column in all rows, like td width in a table?

html

css

html-table

flexbox

quasar-framework