如何为动态生成的Data Table添加列间距？

Hey Shlomi, 别担心，这个列间距的问题很容易解决～ 你的表格现在没有任何间距相关的样式，所以内容才会紧密挤在一起。我们只需要给表格和单元格添加一些CSS规则就能搞定！

具体解决方案 #

你可以在<style>标签中添加针对表格、表头单元格（th）和数据单元格（td）的样式，核心是这两个CSS属性：

• border-spacing: 控制单元格之间的外部间距
• padding: 控制单元格内部内容与边框的距离，避免内容贴边

同时我也修正了你原来样式里的小语法错误（重复的font-family和多余的大括号），确保样式正常生效。

修改后的完整代码 #

<html dir="rtl">
<title>moviewall</title>
<style>
@font-face {
  font-family: "Alef Regular";
  src: url("https://s3.eu-central-1.amazonaws.com/moviewall/Alef-Regular.ttf");
}
body {
  font-family: "Alef Regular", serif;
  margin: 0;
  font-size: 500%;
  color: white;
  line-height: 2.7;
}

/* 添加表格间距样式 */
table {
  border-collapse: separate; /* 确保border-spacing生效，默认collapse会合并边框 */
  border-spacing: 20px; /* 可根据需求调整列间距大小 */
  width: 100%; /* 可选，让表格占满容器宽度 */
}

th, td {
  padding: 10px 15px; /* 单元格内部内边距，上下10px，左右15px */
  text-align: left; /* 和你设置的dir="ltr"匹配，让内容左对齐 */
}
</style>

<div id="content"><div dir="ltr">Loading...</div></div>
<script src="lib.js"></script>
<script>
function getHead() {
  var row = document.createElement('tr');
  ['Movie', 'Hall', 'Time'].forEach(function (text) {
    var column = document.createElement('th');
    column.appendChild(document.createTextNode(text));
    row.appendChild(column);
  });
  return row;
}
function getRow(item) {
  var row = document.createElement('tr');
  ['time', 'hall', 'movie'].forEach(function (property) {
    var column = document.createElement('td');
    column.appendChild(document.createTextNode(item[property]));
    row.appendChild(column);
  });
  return row;
}
function refreshData() {
  var content = document.getElementById('content');
  getAllData(function (data) {
    clear(content);
    var table = document.createElement('table');
    table.appendChild(getHead());
    data
    .filter(function (item) {
      var date = new Date();
      var minutes1 = date.getHours() * 60 + date.getMinutes();
      var minutes2 = convertTimeToMinutes(item.time);
      return minutes2 >= minutes1 && minutes2 <= minutes1 + 120;
    })
    .forEach(function (item) {
      table.appendChild(getRow(item));
    });
    content.appendChild(table);
  });
}
setInterval(refreshData, getInterval());
refreshData();
</script>
</html>

样式说明 #

• border-collapse: separate：必须设置这个属性，否则border-spacing不会生效（默认值是collapse，会合并单元格边框）。
• border-spacing: 20px：你可以根据实际需求调整这个数值，数值越大，列之间的空隙就越宽。
• padding: 10px 15px：让单元格内部的内容和边框保持一定距离，避免文字紧贴边框，提升可读性。

内容的提问来源于stack exchange，提问作者user3241320