Исключая строки из границы таблицы, шахматной доски HTML

Question

Я пытался создать шахматную таблицу (HTML/CSS) со столами. И у меня проблемы с границами стола. Я бы хотел, чтобы на доске была только граница, с номерами строк и столбцами.

Как я могу это сделать?

table { 
 
    border-bottom: solid 2px; 
 
    border-left: solid 2px; 
 
    border-right: solid 2px; 
 
    border-top: solid 2px; 
 
    border-collapse: collapse; 
 
} 
 
tr { 
 
    text-align: center; 
 
} 
 
.black-square { 
 
    background-color: black; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.white-square { 
 
    background-color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<table cellpadding="0" ; cellspacing="0" ;> 
 
    <tr> 
 
    <td></td> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    <td>d</td> 
 
    <td>e</td> 
 
    <td>f</td> 
 
    <td>g</td> 
 
    <td>h</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 

 
    <tr> 
 
     <td>8</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td>8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>7</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     <td>c</td> 
 
     <td>d</td> 
 
     <td>e</td> 
 
     <td>f</td> 
 
     <td>g</td> 
 
     <td>h</td> 
 
     <td></td> 
 
    </tr> 
 
</table>

Answer 1

Я думаю, что самый простой способ заключается в том, что вы можете дать границы: 1px твердых # 000; до .white-square и .black-square и уменьшить 1px от height и width из них.

Jsfiddle

.white-square, 
.black-square 
{ 
    border: 1px solid #000; 
    width: 49px; 
    height: 49px; 
} 

Answer 2

Прежде, у вас есть шальная <tr> в коде между вашими координатами и доски, поэтому убедитесь, что удалить.

Вы можете складывать псевдоселекторов для таргетинга только td.

Нам нужна граница под координатами вверху. То есть, td s первой строки, кроме первой и последней. Правило css для этого:

tr:first-child td:not(:last-child):not(:first-child){ 
    border-bottom: 5px solid red; 
} 

Цвет выбран так, чтобы было ясно, на что мы нацеливаемся.

Используя три аналогичных селектора, мы можем настроить таргетинг на четыре границы доски.

table { 
 
    border-bottom: solid 2px; 
 
    border-left: solid 2px; 
 
    border-right: solid 2px; 
 
    border-top: solid 2px; 
 
    border-collapse: collapse; 
 
} 
 
tr { 
 
    text-align: center; 
 
} 
 
.black-square { 
 
    background-color: black; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.white-square { 
 
    background-color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
tr:first-child td:not(:last-child):not(:first-child){ 
 
    border-bottom: 5px solid red; 
 
} 
 
tr:last-child td:not(:last-child):not(:first-child){ 
 
    border-top: 5px solid fuchsia; 
 
} 
 
tr:not(:first-child):not(:last-child) td:first-child{ 
 
    border-right: 5px solid lime; 
 
} 
 
tr:not(:first-child):not(:last-child) td:last-child{ 
 
    border-left: 5px solid orange; 
 
}

<table cellpadding="0" ; cellspacing="0" ;> 
 
    <tr> 
 
    <td></td> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    <td>d</td> 
 
    <td>e</td> 
 
    <td>f</td> 
 
    <td>g</td> 
 
    <td>h</td> 
 
    <td></td> 
 
    </tr> 
 
    
 
    <tr> 
 
     <td>8</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td>8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>7</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td class="white-square"></td> 
 
     <td class="black-square"></td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     <td>c</td> 
 
     <td>d</td> 
 
     <td>e</td> 
 
     <td>f</td> 
 
     <td>g</td> 
 
     <td>h</td> 
 
     <td></td> 
 
    </tr> 
 
</table>