如何設置自舉表響應移動佈局

我有一張表列出了一家公司的服務。

在移動（sm）視圖中，我希望單元落入單個列中。也許在tablet（md）視圖中，我可能需要兩列。

我可以使用哪些類來完成此操作，還是我會更聰明地使用引導行和列而不是表來重新啓動？

<table class="table table-sm" style="border-top:2px solid #777;" > 
<tbody> 
    <tr style="border:0;"> 
     <td style="border:2px solid #fff;">Truck Tarps</td> 
     <td style="border:2px solid #fff;">Taut Liner Curtains</td> 
     <td style="border:2px solid #fff;">Roll Tops</td> 
     <td style="border:2px solid #fff;">Cap Tarps</td> 
    </tr> 
    <tr style="border:0;"> 
     <td style="border:2px solid #fff;">Load Resistant Curtains</td> 
     <td style="border:2px solid #fff;">Custom Covers</td> 
     <td style="border:2px solid #fff;">Heavy Duty Canvas Canopy</td> 
     <td style="border:2px solid #fff;">Tarp Repairs/Onsite Repairs</td> 
    </tr> 
</tbody> 
</table>

來源

2017-09-13 TimothyAURA

ü使用的引導，我相信你可以得到關於如何使 – Se0ng11

使用自舉的行和列，而不是表在他們的網頁巨大的信息，在你的場景，會更容易和流體 – Amit

沒有在引導4特定的表構建以此爲據我所知，但實際上你只是想表細胞變成窄視塊元素。您可以設置引導4測試版的responsive display utility classes顯示特性替代，但這種情況可能會導致混亂，因爲它是移動第一，你需要向上修正爲中視口覆蓋。

更容易在自己的媒體查詢中輸入自定義CSS，例如

@media all and (max-width: [your-breakpoint]) { 
    table, tr, td { 
    display: block !important; 
    } 
}

您也可以使用th元素標題的具體樣式，並添加間距tr元素，使您的餐桌更清楚地顯示堆疊時。

CSS Tricks對響應表有一些很好的想法。

語義上雖然與您的例子似乎沒有要你爲什麼用表的真正原因;這真的只是一個列表。把它放在桌子上，會讓你不知不覺地感到頭痛。如果我是你，我會使用<ul>列表並從那裏設計它。

來源

2017-09-13 04:33:42

如何設置自舉表響應移動佈局

回答

相關問題