響應表與每行上的標題

我有什麼：響應表。當表成爲響應時，我刪除表頭（th），並只顯示錶數據（td）。如果數據不是自我解釋的話，這可能成爲一個問題。所以我想在接下來的方式響應表與每行上的標題

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

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

我想，我可以使用內容的部分每行前顯示錶頭：之前我的數據，以顯示我的頭ATTR（頭）。由於我的標題將是動態的，我不會硬編碼它們。

例如

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

我遇到的問題是，這一切都janky和不漂亮。但我知道，我需要找到一種方式來設計適合我需求的格式。

理想的方式是，如果我的標題將佔用50％的寬度和50％的數據。

我想要css只有解決方案。

DEMO：

.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; 
 
    } 
 
}

<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>

我確實有一些部分解決了這個問題。

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

數據列溢出到新行時出現問題。在那種情況下，它會一直溢出到左邊，因爲我的標題沒有采用這個高度。

來源

2016-01-28 Paran0a

使用Bootstrap，它比css好。 –

@HamzaZafeer什麼？你能詳細說明一下嗎？也許我可以複製bootstrap正在做的事情。 – Paran0a

Bootstrap是用於在Web上開發響應式移動第一項目的最流行的HTML，CSS和JS框架.Bootstrap使前端Web開發更快更輕鬆。它適用於所有技能水平的人員，各種形狀的設備以及各種規模的項目。 –

我會使用浮動和最小高度來解決這個問題。請嘗試下面的代碼。

@media (max-width : 768px) { 
    table td, .table-bordered td { 
    width  : 47%; 
    min-height : 30px; 
    } 
    .table td, .table-bordered td:first-of-type { 
    float : left; 
    } 
    .table td, .table-bordered td:last-of-type { 
    float : right; 
    } 
    .table tr, .table-bordered tr { 
    overflow : hidden; 
    } 
    }

來源

2016-01-28 13:03:52

響應表與每行上的標題

回答

相關問題