html - 如何在表格单元格 `td` 之间添加空格？

Question

当您看到有文件列和具有排序功能的日期时，我想制作类似于窗口资源管理器的模态窗口，我成功了。我从表格中删除了所有边框，现在我想在列 td 单元格之间添加空格。我如何使用 CSS 做到这一点？

主.css

table {
    border:none !important;
    border-spacing: 10px !important;
}

main.html

<table>
    <tr>
        <th>File</th>
        <th>
            <p ng-click="sortType = 'fileDate'; sortReverse = !sortReverse">
                Date
                <span ng-show="sortType == 'fileDate' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                <span ng-show="sortType == 'fileDate' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
            </p>
        </th>
    </tr>
    <tr ng-repeat="file in data | orderBy:sortType:sortReverse">
        <td ng-click="downloadServerFile(file.filename)" class="noBorder">{{file.filename}}
            <p class=" text-danger current-file-text" ng-if="file.mostRecent"><small>current file recording in progress</small><br></p>
        </td>
        <td class="noBorder">{{file.fileDate |date : 'medium'}}</td>
    </tr>
</table>

Answer 1

我想你想添加这样的东西

td {
    padding: 50px;
}

或者如果您不需要在顶部和底部填充，则只需使用 padding-right。

td {
    padding-right: 50px;
}