javascript - ionic 响应表填充

Question

我的 ionic 应用程序中有一个表

     <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 会使表格延伸的长度超过屏幕宽度(在我的手机上只能看到一半的表格，例如)

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

我可以在我的 Controller 中使用 $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