This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

A table with no external border but only an internal border is similar to the tic-Tac-TOE board effect. I came across The implementation of A Table With Borders Only On The Inside introduction and felt good. This article is also based on this article, along with comments and other minor changes, to introduce several possible approaches.

The structure and contents of the table are as follows:

<table>
    <! - if you consider th < tr > < th > Heading 1 < / th > < th > Heading 2 < / th > < / tr > -- >
  <tr>
    <td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td>
  </tr>
  <tr>
    <td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td>
  </tr>
  <tr>
    <td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td>
  </tr>
  <tr>
    <td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td>
  </tr>
  <tr>
    <td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td><td>💁 🏼</td>
  </tr>
</table>
Copy the code

Basic CSS style for a given table:

table{
    margin: 0 auto;
}
table td{
    padding: 3rem;
}
Copy the code

Display the tic-tac-toe checkerboard effect:

Method 1: Remove unnecessary borders directly

First add all borders, then remove unwanted ones:

  1. Remove the top border (corresponding to the top of each cell in the first row)
  2. Remove the bottom border (corresponding to the top of each cell in the last row)
  3. Remove the left border (corresponding to the left of the first cell in each row)
  4. Remove the border to the right (corresponding to the right of the last cell in each row)
table {
  border-collapse: collapse;
}
table td {
  border: 5px solid black; 
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child {
  border-right: 0;
}
Copy the code

If you consider the th header tag, you can change it to the following:

table {
  border-collapse: collapse;
}
table td.table th {
  border: 5px solid black; 
}
table tr:first-child th {
  border-top: 0;
}
table tr td:first-child,table tr th:first-child {
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child.table tr th:last-child {
  border-right: 0;
}
Copy the code

Border-style: hidden; style

Hide table border-style and set td border-style using CSS tip below.

table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border: 5px solid black;
}
Copy the code

Note in MDN:

“In the case of table, cell border collapses, the hidden value has the highest priority: this means that if any other conflicting borders are set, it will not be displayed.

“In case of table cell and border collapsing, the hidden value has the highest priority: It means that if any other conflicting border is set, it won’t be displayed.”

Table border-color: transparent; Block the border of the cell.

Border-color: transparent; , you can also hide the border around the table. The color of the table should be transparent in nature and block the border of the cell to achieve no border outside the table.

  • Table set border-width to be greater than td border-width.
table {
    border-collapse: collapse;
    border: 6px solid transparent;
}

table td {
    border: 5px solid black;
}
Copy the code
  • Table set border-style to double block TD border.
table {
    border-collapse: collapse;
    border: 5px double transparent;
}

table td {
    border: 5px solid black;
}
Copy the code

Method three: clever use of adjacent selector to achieve

Through the adjacent selector, the clever implementation, only when there are adjacent elements to set the border, so that the first line, each line of the first TD, can not meet the conditions of the existence of adjacent elements, that is, no border, to achieve the tic-tac-toe effect.

table {
   border-collapse: collapse;
}
table td + td {
   border-left: 5px solid black;
}
table tr + tr td {
   border-top: 5px solid black;
}
Copy the code

Method 4: The NOT property of the CSS

With the not attribute, select elements that are not the first row or td, as with the adjacent selector above.

table {
   border-collapse: collapse;
}
table td:not(:first-child) {
   border-left: 5px solid black;
}
table tr:not(:first-child) td {
   border-top: 5px solid black;
}
Copy the code

Nth-child (an+b) pseudo-class

As with the previous two, find the element starting from the second TD or line tr using the: nth-Child (n+2) pseudo-class and set the attribute.

table {
   border-collapse: collapse;
}
table td:nth-child(n + 2) {
   border-left: 5px solid black;
}
table tr:nth-child(n + 2) > td {
   border-top: 5px solid black;
}
Copy the code

Method 6: Use the rules attribute

The rules property is deprecated, but most browsers retain compatibility support (the border property is recommended to achieve the same effect).

Rules =”all” indicates that rules are displayed between rows and columns.

<table rules="all">
     <tr>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
     </tr>
     <! - omitted - >
     <tr>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
         <td>💁 🏼</td>
     </tr>
 </table>
Copy the code

Rules =”all” works like this:

If rules=”rows” is used, then:

If you want to control the style of the border, the width of the border, etc., you need to use the CSS border attribute.

Such as:

table td {
   border: 6px double black;
}
Copy the code