css стиль стола границы границ странный

Question

У меня возникла странная проблема с укладкой стола. Все, по крайней мере, для меня в коде, кажется, все в порядке. однако эффекты являются неожиданными.

Я должен оставить поле 0,3 метра, поскольку это моя студенческая задача, но я не хочу, чтобы линии внизу были отдельными.

Любой веб-мастер может помочь? Я был бы очень благодарен. Вот мир моего кода:

<table> 
<tr> 
<td>Kategoriasystematyczna</td> 
<td>Takson</td> 
</tr> 
<tr> 
<td>Domena</td> 
<td>eukarionty</td> 
</tr> 
<tr> 
<td>Królestwo</td> 
<td>zwierzęta</td> 
</tr> 
<tr> 
<td>Gromada</td> 
<td>ssaki</td> 
</tr> 
<tr> 
<td>Podgromada</td> 
<td>ssakiżyworodne 
<td> 
</tr> 
<tr> 
<td>Infragromada</td> 
<td>łożyskowce 
<td> 
</tr> 
<tr> 
<td>Rząd</td> 
<td>parzystokopytne 
<td> 
</tr> 
<tr> 
<td>Rodzina</td> 
<td>żyrafowate 
<td> 
</tr> 
<tr> 
<td>Rodzaj</td> 
<td>Giraffa(Brünnich,1771) 
<td> 
</tr> 
<tr> 
<td>Gatunek</td> 
<td>żyrafa 
<td> 
</tr> 
</table> 

и стиль

td{ 
border:1pxsolidblue; 
margin:0.3em,0.3em,0.3em,0.3em; 
} 
table{ 
border:1pxsolidblue; 
border-collapse:collapse; 
} 

И это, как моя таблица выглядит

Любой? Antyhing?

Answer 1

вы открытия метки вместо закрытия тегов т.д:

изменения

<td>Gatunek</td> 
<td>żyrafa 
<td> 

в

<td>Gatunek</td> 
<td>żyrafa 
</td> 

в различных местах

Answer 2

Как упоминалось в моем первоначальном комментарии к вашему ответу (до удаления для избыточности), проблема заключается в синтаксических ошибках unclose d <td> элементов (возможно, опечаток), исправление вашего HTML исправляет проблему. Исправленный HTML:

<table> 
    <tr> 
     <td>Kategoriasystematyczna</td> 
     <td>Takson</td> 
    </tr> 
    <tr> 
     <td>Domena</td> 
     <td>eukarionty</td> 
    </tr> 
    <tr> 
     <td>Królestwo</td> 
     <td>zwierzęta</td> 
    </tr> 
    <tr> 
     <td>Gromada</td> 
     <td>ssaki</td> 
    </tr> 
    <tr> 
     <td>Podgromada</td> 
     <td>ssakiżyworodne</td> 
    </tr> 
    <tr> 
     <td>Infragromada</td> 
     <td>łożyskowce</td> 
    </tr> 
    <tr> 
     <td>Rząd</td> 
     <td>parzystokopytne</td> 
    </tr> 
    <tr> 
     <td>Rodzina</td> 
     <td>żyrafowate</td> 
    </tr> 
    <tr> 
     <td>Rodzaj</td> 
     <td>Giraffa(Brünnich,1771)</td> 
    </tr> 
    <tr> 
     <td>Gatunek</td> 
     <td>żyrafa</td> 
    </tr> 
</table> 

JS Fiddle demo.

Кроме того, ваш CSS является проблематичным, у вас есть запятые между значениями ваших значений свойств и пробелов для разделения свойств границы; фиксированный, он должен выглядеть так:

td { 
    border: 1px solid blue; 
    margin: 0.3em; 
} 
table { 
    border: 1px solid blue; 
    border-collapse: collapse; 
}