離子responive表填充

Question

我有一個表在我的應用離子

 <table> 
     <tr> 
      <td ng-repeat="item in topRow"> {{item}} </td> 
     </tr> 
     <tr> 
      <td ng-repeat="item in middleRow"> {{item}} </td> 
     </tr> 
     <tr> 
      <td ng-repeat="item in bottomRow"> {{item}} </td> 
     </tr> 
    </table> 

和我想要的是一些填充到這個表，我通過這樣做，在我的.css添加

th, td { 
    padding: 15px; 
} 

在我的電腦瀏覽器的偉大工程，但較小的屏幕上，說一個電話，padding 15px將使表比屏幕寬度延伸得更長（只有一半的桌子是我的手機上看到，例如）

如何根據屏幕寬度將填充添加到我的表格中，以便表格寬度不會大於屏幕寬度？

我能夠得到屏幕寬度，在我的控制器

$scope.window = { 
    width: $window.screen.width, 
    height: $window.screen.height 
}; 

但我怎麼能在我的表使用使用$窗口？

編輯：我有一個很好的答案，但我覺得它太複雜了（將使用它，除非有一個更好的（容易）的方式雖然）

我的預期輸出是這樣的：

顯示qwerty鍵盤的表格或網格或任何可能的工作，我需要填充的原因是因爲它看起來是所有字符按在一起的錯誤。

有沒有更好的方法來做到這一點？

Answer 1

編輯： 閱讀評論後，我強烈推薦使用Bootstrap。隨着響應表。在W3S有一個很好的文檔。太看看響應表如何工作click here並嘗試調整窗口的大小。

如果您只是想根據屏幕寬度添加填充，則可以使用Javascript樣式屬性。你需要爲表格定義一個Id或者爲tds使用一個類。在此之後，您需要的是確保僅當屏幕小於x時才觸發腳本。

推薦結構：

 <table> 
    <tr> 
     <td ng-repeat="item in topRow smallScreenPadding"> {{item}} </td> 
    </tr> 
    <tr> 
     <td ng-repeat="item in middleRow smallScreenPadding"> {{item}} </td> 
    </tr> 
    <tr> 
     <td ng-repeat="item in bottomRow smallScreenPadding"> {{item}} </td> 
    </tr> 
</table> 

現在，我們有一流的，我們只需要一些甜蜜的JavaScript：

// Set Styles 
function setStyle(){ 

    //get class Arrays 
    var elem = document.getElementsByClassName("smallScreenPadding"); 

    // Check if Array exists and has at least 1 element 
    if(typeof elem !== 'undefined' && elem .length > 0){ 

    // Loop through array 
    for (var i = 0; i < elem.length; ++i){ 

     // set style for current element. 
     elem[i].style.padding = "your desired padding here e.g. 5px"; 

    } 
    } 
} 


//Check for desired width and execute function (put in your own width check) 
if (width <= x){ 
    setStyle(); 
} 

如果你不想使用一個循環，你可以去CSSString（沒有循環）：

elem.style.cssText = cssString; 

如果您只想使用CSS，您可以嘗試使用CSS框架，如Boots陷阱。在那裏你可以使用響應式桌子，這會讓你的工作變得更加簡單。

問候，Megajin