时间戳

首页 > 解决方案 > 表中两列之间的空间？

html - 表中两列之间的空间？

问题描述

我正在使用数据表来显示数据库中的数据。数据表的两列之间没有空格。如何在它们之间添加空间。我尝试了一些代码，但没有运气......

<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%;
        font-family: "Alef Regular";
        color: white;
        line-height: 2.7;

    }

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

块引用

如何在列 tr 文本之间添加空格或间隙？“时间”、“大厅”、“电影”

现在，他们彼此相依为命……

非常感谢

什洛米

标签： htmlcss

解决方案

使用border-spacing，请参见下面的示例：

table {
  border-collapse: separate;
  border-spacing: 30px 0;
}

td {
  border: 1px solid red;
  padding: 20px 0;
}
<table>
  <tr>
    <td>1st column</td>
    <td>2nd column</td>
    <td>3rd column</td>
    <td>4th column</td>
  </tr>
</table>

推荐阅读