Как добавить пространство между ячейками таблицы `td`?

Question

Я хочу сделать модальное окно, как окно Explorer, когда вы видите, есть столбец файлов и Date с функцией сортировки, я получил эту работу. Я удалил все границы из таблицы. Теперь я хочу добавить пробел между столбцами td cell. как я могу это сделать с помощью 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 1

Я думаю, вы хотите добавить что-то вроде этого

td { 
    padding: 50px; 
} 

или просто использовать padding-right, если вы не» t нужно заполнить сверху и снизу.

td { 
    padding-right: 50px; 
} 

Answer 2

попробовать это

<table> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Four</td> 
    </tr> 
</table> 

td:nth-of-type(2) { 
padding-right: 20px; 
} 

Answer 3

я просто хочу, чтобы добавить пространство между колоннами

border-spacing принимает два значения, горизонтальные & вертикали.

E.g.

/* border-spacing: horizontal vertical */ 
border-spacing: 1% 2em; 

MDN Reference

table { 
 
    border:none !important; 
 
    border-spacing: 10px 0 !important; 
 
    /* override bootstrap default */ 
 
    border-collapse:separate !important; 
 
} 
 
    
 
    td { 
 
    background: pink; 
 
    padding: 1em; 
 
    /* for demo only - not a border */ 
 
    outline:1px solid grey; 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>