javascript - 我如何在 Javascript 中为该表设置边框

标签 javascript css html

<!DOCTYPE html>
<html>    
<head>
    <title>Table</title>
</head>    
<body>
    <script>
        var num = 2;
        for (var i = 1; i < 11; i++) {
            document.write(num + " * " + i + " = " + num * i);
            document.write('<br>');
        }
    </script>
</body>    
</html>

操作:

2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
2 * 10 = 20

这是一个 JavaScript 代码,我在其中打印了 2-Table。但是我需要在该表周围放置一个边框。寻求帮助。

最佳答案

我只需将 JavaScript 生成的内容包装在 block 级元素中(例如 pre),然后使用 CSS 显示边框。

请注意,我重写了 <br>行,以便在最后一行之后省略尾部换行符,可选且仅用于演示。

pre {
  display: inline-block;
  border: 1px solid blue;
  padding: 20px;
}
<pre>
<script>
  var num = 2;
  for (var i = 1; i < 11; i++) {
    if (i !== 1) {document.write('<br>')};
    document.write(num + " * " + i + " = " + num * i);
  }
</script>
</pre>

关于javascript - 我如何在 Javascript 中为该表设置边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33565926/

相关文章:

html - 无法以正确的意图对齐图像旁边的文本

javascript - 如何在backbone.js中传递包含/的id

javascript/jquery - 用户关闭浏览器时的跨浏览器检测?

html - 显示没有异常空格的 <p> 句子

javascript - 当我向下滚动到它们的 div 时如何使侧面 ID 导航链接处于事件/悬停状态

javascript - 删除基于子div的div类

javascript - 是否可以通过 Laravel Controller 将 JQuery datepicker 对象传递到数据库中?

javascript - 任何客户端 haml 解析器?

html - 将文本居中对齐

javascript - 简单类型和删除效果不起作用