響應(yīng)式網(wǎng)頁設(shè)計 (Responsible Web Designer) 的最大挑戰(zhàn)之一是呈現(xiàn)表格數(shù)據(jù)。 包含很多列的大表格根本不適合較小的屏幕，并且沒有簡單的方法使用 CSS 和 Media Query 重新格式化表格內(nèi)容，以獲得可接受的視覺顯示。

為了解決這個問題，SAP UI5 框架提供了基于列的解決方案（列隱藏）和基于行的解決方案（彈出行為）以響應(yīng)式顯示表格，并且這兩個選項同時適用。這聽起來可能相當(dāng)復(fù)雜，讓我們通過一個具體例子來了解：

在移動設(shè)備上，我們知道我們沒有足夠的空間來顯示所有這些列，所以我們需要問問自己哪些列最重要。 比方說：

• 產(chǎn)品和價格是最重要的。 所以他們不應(yīng)該被隱藏。

• 供應(yīng)商、尺寸和重量不是特別重要，因此我們只會在彈出區(qū)域顯示它們。

因此這個表格在手機(jī)上顯示如下：

Responsive Column Control

我們可以使用 sap.m.Column 的 API 來控制響應(yīng)式表格設(shè)計。

此控件提供兩個屬性來處理列隱藏和彈出行為。

• minScreenWidth：此值定義列可見性的斷點。 例如：Apple iPhone 5 設(shè)備具有 568px x 320px 分辨率（dip/設(shè)備寬度），因此如果我們分配 400px（或基于 16px 的 25em），則此列對于縱向（portrait)模式（寬度 320px）將不可見，但會在橫向模式下可見（寬度 568px）。

除了以 px 或 em 為單位指定之外，您還可以分配預(yù)定義的 sap.m.ScreenSize 類型之一，例如平板電腦（600 像素）或桌面電腦（1024 像素）。

此屬性的默認(rèn)值為空字符串，這意味著此列將始終可見。

• demandPopin：根據(jù)你的minScreenWidth，可以在不同的屏幕尺寸下隱藏該列。 將此屬性設(shè)置為 true 會在彈出區(qū)域中顯示此列而不是將其隱藏。 默認(rèn)值為 false.