Question

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

<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文本之间添加空格或间隙？ '时间'，'大厅'，'电影'

现在他们互相依恋......

非常感谢

施洛米

Answer 1

如果你需要在文本周围填充：

td {
   padding: 10px;
}

如果你想在表格单元格之间留出真正的空间：

td {
    border-spacing: 5px;
}

Answer 2

使用border-spacing，请参阅以下示例：

＆＃13;

table {
  border-collapse: separate;
  border-spacing: 30px 0;
}

td {
  border: 1px solid red;
  padding: 20px 0;
}

＆＃13;

<table>
  <tr>
    <td>1st column</td>
    <td>2nd column</td>
    <td>3rd column</td>
    <td>4th column</td>
  </tr>
</table>

＆＃13;

表中两列之间的空格？

2 个答案: