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

Posted 2023-03-06

【中文标题】如何在所有行中将列缩小到该列的最大宽度，例如表格中的 td 宽度？

【英文标题】：How to shrink column to max width of that column in all rows, like td width in a table?

【发布时间】：2021-05-18 09:29:40

【问题描述】：

我想用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>

在表格的情况下，第一行的第一个单元格将扩大宽度，以便第二个单元格 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 |
-------------------------------------------------

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

这可能吗？

我之所以要这样做是因为我希望每一行都是 Quasar q-card，但其中的元素应该与上面和下面的卡片对齐，但仍然占用最少的空间而不是通过“12 列”网格系统控制宽度。

基本上像这样，我需要将徽章和输入对齐，就好像它是一张桌子一样（我不能使用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>

【问题讨论】：

如果你想让 div 表现得像一个表格，为什么不使用显示表格而不是 flex 呢？另外，如果是表格数据，有什么理由删除表格？

看这个***.com/questions/46824086/…

【参考方案1】：

用display:table代替flex可能会更好

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>

【讨论】：

我只是想指出，当“行”-div 之间应该有间距时，这会产生一个问题，例如将box-shadow 应用于它们时，这将被下一个覆盖排。可以将行包装在<template>-tag 中，遍历模板，并让模板包含q-card，后跟固定高度的div。然后这个 div 在q-cards 之间创建空白空间，使下阴影可见。

@DanielF 如果你想要行之间的间距，你可以使用border-spacing: 0 10px; 来添加一些间距（这就像老式的单元格间距） - 请参阅这篇文章：***.com/questions/1264187/…

【参考方案2】：

使用display: flexbox，您可以通过按列而不是按行组织数据来做到这一点。使用display: 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>

【讨论】：

我确实考虑过这一点，但这会与通过v-for='element in elements' 遍历每个对象混淆（但是，再想一想，可能不会那么多，因为我只需要遍历每一列.)

@DanielF 我已经用另一种解决方案更新了我的答案，该解决方案可以维护标记中的数据结构，请再看看。

谢谢。因为我对第一种方法的问题是我不能遍历每一列，因为每一行都应该是一个 q-card 元素。

【参考方案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 链接。