从表格边框，棋盘HTML中排除行

时间：2015-10-31 12:47:05

标签： html css html-table row border

我试图创建一个带有表格的棋盘（HTML / CSS）。而且我遇到桌边界问题。我希望只有董事会有一个边框，排除行号和列字母。

我该怎么做？

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我认为最简单的方法是你可以给边框：1px solid＃000;到.white-square和.black-square并从1px和height中减少width。

Jsfiddle 

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

答案 1 :(得分：0)

首先，您的坐标与电路板之间的代码中有一个迷路<tr>，因此请务必将其删除。

您可以堆叠伪选择器以仅定位您需要的td。

我们希望顶部坐标下方有一个边框。也就是说，第一行的td，除了第一行和最后一行。 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>

相关问题
最新问题