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

Posted 2023-03-05

【中文标题】从表格边框、棋盘 HTML 中排除行

【英文标题】：Excluding rows from table border, chessboard HTML

【发布时间】：2016-01-31 19:26:19

【问题描述】：

我试图用表格创建一个棋盘 (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>

【参考方案1】：

我认为最简单的方法是你可以给border: 1px solid #000;到 .white-square 和 .black-square 并将 1px 从 height 和 width 减少。

Jsfiddle

.white-square,
.black-square

    border: 1px solid #000;
    width: 49px;
    height: 49px;

【讨论】：

@Isaac 这有用吗？

【参考方案2】：

首先，您的代码中在您的坐标和棋盘之间有一个杂散的<tr>，因此请务必将其删除。

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

我们希望在顶部坐标下方有一个边框。即第一行的tds，除了第一行和最后一行。其 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>