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