Question

我拥有的：响应表。当表变为响应时，我删除表标题（th）并仅显示表数据（td）。如果数据不能自我解释，这可能会成为一个问题。所以我想以下一种方式在每一行之前显示表头

 _______________________
| NAME       Apples     |
|_______________________|
| AMOUNT     10T        |
|_______________________|

 _______________________
| NAME       ORANGES    |
|_______________________|
| AMOUNT     2kg        |
|_______________________|

我想到了我可以使用内容的部分：attr（headers）在我的数据之前显示我的标题。由于我的标题是动态的，我不会硬编码。

例如

td:before {
  content: attr(headers);
}

我遇到的问题是，这一切都很笨拙而且不漂亮。但我知道我需要找到一种方法来格式化以满足我的需求。

理想的方法是，如果我的标题占50％，数据占宽度的50％。

我只想要 css 解决方案。

样本：

＆＃13;

.table-bordered {
    width: 100%;
    border-collapse: collapse;
}
.table-bordered th {
    text-align: left;
}
.table-bordered th:first-child {
    padding-left: 0;
}
.table-bordered th:last-child {
    padding-right: 0;
}
.table-bordered td:first-child {
    padding-left: 0;
}
.table-bordered th, .table-bordered td {
    border: 1px solid #000;
}
@media (max-width:768px) {
    .table-bordered thead, .table-bordered tbody, .table-bordered th, .table-bordered td, .table-bordered tr {
        display: block;
    }
    .table-bordered tr {
         margin-bottom: 0.5em;
    }
    .table-bordered th {
        display: none;
    }
    .table-bordered td {
        padding: 0.5em !important;
        border: 1px solid #000;
    }
}

＆＃13;

<table id="report_artikli" class="table-bordered">
    <thead>
        <tr><th id="SIF_ART">Sif Art</th><th id="NAZ_ART">Naz Art</th></tr>
    </thead>
    <tbody>
        <tr><td headers="SIF_ART">568846</td><td headers="NAZ_ART">HLAČE 3SA PES PANT /DARK NAVY/BIJELA/</td>
        <tr><td headers="SIF_ART">562588</td><td headers="NAZ_ART">OBUĆA TRČANJE VANQUISH /CRNA/MET.SILVER/</td></tr>
        <tr><td headers="SIF_ART">772442</td><td headers="NAZ_ART">OBUĆA ORIGINALI ANZO LOW /TURF GREY/</td></tr>
        <tr><td headers="SIF_ART">467304</td><td headers="NAZ_ART">OBUĆA ORIGINALI RHYOLITE MID K /TITAN GREY/SKY/</td></tr>
        <tr><td headers="SIF_ART">397385</td><td headers="NAZ_ART">ŠTITNIK +PREDATOR LITE /BIJELA/METALLIC SILVER/</td></tr>
        <tr><td headers="SIF_ART">059850</td><td headers="NAZ_ART">KAPA FEEL A BEANIE /FROST PINK/MEDIUM GREY/</td></tr>
    </tbody>
</table>

＆＃13;

我实际上有一些可以部分解决问题的东西。

td:before {
    content: attr(headers);
    float: left;
    text-align: left;
    width: 50%;
    display: inline-block;
}

当数据列溢出到新行时出现问题。在这种情况下，它会一直向左溢出，因为我的标题不会占据那个高度。

Answer 1

我会使用浮点数和最小高度来解决这个问题。请尝试下面的代码。

{{1}}

每行有标题的响应表

1 个答案: