Table 不同宽度列与 flexbox 的类似对齐方式

Question

可以使用 flexbox 或其他 CSS 技术实现这种 table 行为吗？我正在尝试对齐第二列的单元格。在我的实际代码中，每个单元格都是 div.

我知道 display:table，不幸的是我已经运行使用它遇到了几个问题，所以我正在尝试找到一个 flexbox 解决方案。理想情况下，我希望第二列单元格具有不同的宽度。

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Row 2 is longer</td>
    <td>This column is aligned either way</td>
  </tr>
</table>

这是我的非 table HTML，我希望它看起来与上面相同。来自后端的单元格的内容和宽度可能会有所不同，但第一列应始终“尽可能小”，就像 HTML table 使其具有默认样式一样。

<div class="lines">
  <div class="line">
    <div class="title">Column 1</div>
    <div class="description">Column 2</div>
  </div>
  <div class="line">
    <div class="title">Row 2 is longer</div>
    <div class="description">This column is aligned either way</div>
  </div>
</div>

Answer 1

您可以使用各种 flexbox 属性来实现所需的结果，如下例所示。

.wrapper {
display:flex;
width:90vw;
margin-left:5vw;
}

.container {
display:flex;
flex-direction:column;
width:50%;
}

<div class="wrapper">
  <div class="container">
    <span>Column 1</span>
    <span>Row 2 is longer</span>
    <span>Row 2 is much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longer much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longe much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longe</span>
    <span>I am short</span>
     <span>Row 2 is much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longer much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longe much much longr longer much much longr longermuch much longr longer much much longr longer much much longr longer much much longr longe</span>
  </div>
  <div class="container">
    <span>Column 2</span>
    <span>This column is aligned either way</span>
  </div>
</div>

Answer 2

您可以使用网格：

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
}

<div class="grid">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Row 2 is longer</div>
    <div>This column is aligned either way</div>
</div>

Answer 3

对于当前的 HTML，您需要使用 display:contents 来“打开”子容器，然后 CSS-Grid 可以完成剩下的工作。

.lines {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0 1em;
}

div {
  border:1px solid grey;
}

.line {
  display:contents;
}
.title {
  grid-column: 1;
}

.description {
  grid-column: 2;
}

<div class="lines">
  <div class="line">
    <div class="title">Column 1</div>
    <div class="description">Column 2</div>
  </div>
  <div class="line">
    <div class="title">Row 2 is longer</div>
    <div class="description">This column is aligned either way</div>
  </div>
</div>

Answer 4

html <table> 及其子项可以灵活使用。

我添加了一些示例如何使用列宽类和一些样式示例。每行可以具有与其他行相同或不同数量的列。 colspan 的东西创建起来非常简单。

它对智能手机、平板电脑和大屏幕响应迅速。

table, tr {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}
tbody, thead, tfoot, th, td {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}
th, td {
    vertical-align: top;
    text-align: inherit;
    text-align: -webkit-match-parent;
}

/* table small screen */

@media (max-width: 576px) {
    table {
        min-width: 576px;
    }
    .f-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* === example column width === */

th.th-25, td.td-25, .th-25 th, .td-25 td { max-width: 25%; }
th.th-33, td.td-33, .th-33 th, .td-33 td { max-width: 33.3333%; }
th.th-50, td.td-50, .th-50 th, .td-50 td { max-width: 50%; }
th.th-66, td.td-66, .th-66 th, .td-66 td { max-width: 66.6666%; }
th.th-75, td.td-75, .th-75 th, .td-75 td { max-width: 75%; }
th.th-100, td.td-100, .th-100 th, .td-100 td { max-width: 100%; }

/* === example styling === */

table {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
th, td {
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  font: normal 14px/1.3 "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  padding: 2px 5px 4px 5px;
}
th {
  background-color: #33a;
  color: #fff;
  font-weight: 600;
}

<div class="f-table">
    <table class="td-33">
        <tbody>
            <tr class="th-33">
                <th>Lorem ipsum dolor</th>
                <th>Lorem ipsum dolor</th>
                <th>Lorem ipsum dolor</th>
            </tr>
            <tr>
                <td class="td-66">Lorem ipsum dolor sit amet.</td>
                <td class="td-33">Lorem ipsum dolor sit amet consectetur.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing.</td>
                <td>Lorem ipsum dolor sit amet,.</td>
            </tr>
            <tr class="th-100">
                <th>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum.</th>
            </tr>
            <tr class="td-50">
                <td>Lorem ipsum dolor sit amet, consectetur.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat non.</td>
            </tr>
            <tr class="td-100">
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat non, egestas et diam.</td>
            </tr>
        </tbody>
    </table>
</div>

Table 不同宽度列与 flexbox 的类似对齐方式

Table-like alignment of different-width columns with flexbox

css

flexbox