hussain hussain - 3 months ago 15
CSS Question

How to add space between table cells `td`?

I want to make modal window like window explorer when you see there is file column and Date with sort function, I got that working. I removed all borders from table, Now i want to add space between columns

td
cell. how can I do that with CSS ?

main.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

I'm thinking you want to add something like this

td {
    padding: 50px;
}

or just use padding-right if you don't need padding on the top and bottom.

td {
    padding-right: 50px;
}