离子响应表填充

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会使桌子延长的时间长于屏幕宽度（例如，我手机上只能看到一半的桌子）< / p>

如何根据屏幕宽度向表格添加填充，以使表格宽度不大于屏幕宽度？

我可以使用控制器中的$ window来获取屏幕宽度

$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框架，例如Bootstrap。在那里，您可以使用响应表，这将使您的工作更轻松。

此致，Megajin