Ячейки таблицы не разделены

Question

Я создал таблицу в HTML. Когда я взглянул на страницу, я заметил, что ячейки не разделены. Я не нашел никаких решений в Google. Вот как это выглядит:

Вот код, который я использовал:

<table style="margin-top:50px;border:2px solid red;border-collapse:collapse;"> 

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

Answer 1

Добавить padding и borders к tr и td элементов.

JSFiddle Demo

td {padding:10px; border-right:1px solid orange;} 
tr { border-bottom:1px solid blue } 

Answer 2

Я не знаю, если это то, что вы ищете: Padding in TD

td { 
    padding: 20px; 
}