Javascript 离子响应表填充

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

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

在我的电脑浏览器中效果很好，但是在较小的屏幕上，比如手机，

填充15px

会使桌子的长度超过屏幕宽度（例如，在我的手机上，只有一半的桌子是可见的）

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

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

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

但是我怎么能在我的桌子上用这个呢

编辑：我得到了一个很好的答案，但我觉得它太复杂了（除非有更好（更容易）的方法，否则我会使用它）

我的预期输出是：

显示qwerty键盘的表格、网格或其他任何可以使用的东西，我之所以需要填充，是因为所有字符压在一起看起来都不对

也许有更好的方法吗？

编辑： 在阅读了这些评论之后，我强烈建议使用Bootstrap。有反应灵敏的桌子。这里有一个很好的文档。也可以查看响应表的工作方式，并尝试调整窗口大小

如果只想根据屏幕宽度添加填充，可以使用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>

如果你只想使用CSS，你可以尝试使用CSS框架，比如Bootstrap。在那里，你可以使用一个反应灵敏的表格，这将使你的工作更容易

您好，Megajin

编辑： 在阅读了这些评论之后，我强烈建议使用Bootstrap。有反应灵敏的桌子。这里有一个很好的文档。也可以查看响应表的工作方式，并尝试调整窗口大小

如果只想根据屏幕宽度添加填充，可以使用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>

如果你只想使用CSS，你可以尝试使用CSS框架，比如Bootstrap。在那里，你可以使用一个反应灵敏的表格，这将使你的工作更容易

---

您好，Megajin

我一定会试试这个，虽然这样会更容易（也许这很容易…只是对我来说不太容易：p）谢谢您的快速回复，欢迎您。最简单的方法是使用CSS框架。不要害羞，问你是否需要更多的帮助。你能看看我的更新吗？也许你有一些想法。你想像在智能手机上那样显示键盘吗（例如，开始在输入框中输入）？或者该表在站点中显示为常规表？就像普通表一样，该图像实际上是我在提供的表中的输出，并填充15px（在我的浏览器中，在我的手机上，只有一半的表可见）。我肯定会尝试此方法，尽管这会更容易（也许这“容易”…只是不适合我：P）谢谢你的快速回复。不客气。最简单的方法是使用CSS框架。不要害羞，问你是否需要更多的帮助。你能看看我的更新吗？也许你有一些想法。你想像在智能手机上那样显示键盘吗（例如，开始在输入框中输入）？或者该表在站点中的显示方式与常规表类似？与普通表一样，该图像实际上是我在提供的表中的输出，并填充15px（在我的浏览器中，在我的手机上，只有一半的表可见）

// 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();
}

elem.style.cssText = cssString;