Question

我试图用flexbox创建一个表，但是我有一些问题让它表现得像一张桌子。我不能只采取所需的空间，但仍然垂直对齐。正如您所看到的，如果您运行附加代码，则所有列都占用相同的空间。关于我如何解决这个问题的任何建议？

＆＃13;

.table {
    display: flex;
    flex-flow: column;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    max-width: 100%;
}

.table__row {
    display: flex;
    max-width: 100%;
    border-bottom:  1px solid #000;
}
.table__row:nth-of-type(even) {
    background-color: #fff;
}

.table__row:nth-of-type(odd) {
    background-color: #efefef;
}

.table__column {
    display: flex;
    text-align: left;
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 1rem;
    border-right: 1px solid #000;
    word-break: break-word;
}

.table__header {
    background-color: blue;
    color: #fff;
}

＆＃13;

<div class="table">
    <div class="table__row">
        <div class="table__column table__header">
            ID
        </div>
        <div class="table__column table__header">
            TAG
        </div>
        <div class="table__column table__header">
            USED
        </div>
        <div class="table__column table__header">
            USER
        </div>
        <div class="table__column table__header">
            IP
        </div>
        <div class="table__column table__header">
            DATE
        </div>
    </div>
    <div class="table__row">
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            newpage
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            05.02.2018
        </div>
    </div>
    <div class="table__row">
        <div class="table__column">
            2
        </div>
        <div class="table__column">
            news
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            05.02.2018
        </div>
    </div>
    <div class="table__row">
        <div class="table__column">
            3
        </div>
        <div class="table__column">
            rajohan
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            05.02.2018
        </div>
    </div>
    <div class="table__row">
        <div class="table__column">
            4
        </div>
        <div class="table__column">
            website
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            05.02.2018
        </div>
    </div>
    <div class="table__row">
        <div class="table__column">
            5
        </div>
        <div class="table__column">
            testtesttesttesttest test test
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            1
        </div>
        <div class="table__column">
            0
        </div>
        <div class="table__column">
            05.02.2018
        </div>
    </div>
</div>

＆＃13;

Answer 1

如果数据更适合，您应该使用实际的<table>。如果必须使用<div>标记，也可以使用CSS表格，它的行为与HTML表格完全相同。

.table {
  display: table;
}

.table__row {
  display: table-row;
}

.table__column {
  display: table-cell;
}

让flexbox像表一样运行

1 个答案: