Question 223089 in Html Question posted in
Some basic documentation can be found here.

Html – How to remove borders that overlap each other in a table with CSS

I’ve created the table, but where 2 cells meet, the border is darker and thicker. How can I solve this issue? Here’s my CSS code.

.custom-table-2 {
  border-collapse: separate;
  /*border-collapse: collapse;*/
  border-spacing: 0;
}

.custom-table-2 td {
  border: 1px solid #00953B;
}

.custom-table-2 tr:first-child td:first-child {
  border: 0px;
}

.custom-table-2 tr:nth-child(2) td:first-child {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:nth-child(2) {
  border-top-left-radius: 16px;
}

.custom-table-2 tr:first-child td:last-child {
  border-top-right-radius: 16px;
}
.custom-table-2 td:nth-child(2) {
  background-color: #7CCB99;
}

Image of the table

If I use ‘border-collapse: collapse;’, it won’t be thicker, but then the border radii won’t show. Any ideas for a solution?

Tags:

2

Answers


  1. 0

    If you have a table with borders that overlap each other and you want to remove the overlapping borders using CSS, you can try a few different approaches. Here are two common methods:

    1. Border Collapse:
      CSS provides a property called border-collapse which controls whether the borders of table cells should be collapsed into a single border or separated. To remove overlapping borders, you can set this property to collapse.
    table {
  border-collapse: collapse;
}

/* Optionally, set border-spacing to control the space between cells */
table {
  border-collapse: collapse;
  border-spacing: 0; /* You can adjust this value */
}

    By using border-collapse: collapse;, adjacent cell borders will be collapsed into a single border, effectively removing any overlapping borders.

    1. Individual Border Styles:
      If you want more control over each cell’s border, you can apply individual border styles to each cell.
    td, th {
  border: 1px solid black; /* Or whatever your desired border style is */
}

/* Optionally, remove borders from first and last cells in a row */
tr td:first-child,
tr th:first-child {
  border-left: none;
}

tr td:last-child,
tr th:last-child {
  border-right: none;
}

    By setting the border style individually for each cell, you can prevent overlapping borders and style them as needed.

    Remember that these approaches are meant to address common scenarios where table borders overlap. Depending on your specific situation and CSS rules, you may need to adjust these solutions to suit your needs.

    Login or Signup to reply.
  2. 0

    Set individual borders for <td>, not shorthand:

    table {
  border-collapse: separate;
  border-spacing: 0;
}

table td {
  border-left: 1px solid #00953B;
  border-top: 1px solid #00953B;
  padding: 20px;
}

table td:last-child {
  border-right: solid 1px #00953B;
}

table tr:last-child td {
  border-bottom: solid 1px #00953B;
}

table tr:first-child td:first-child {
  border: 0px;
}

table tr:nth-child(2) td:first-child {
  border-top-left-radius: 16px;
}

table tr:first-child td:nth-child(2) {
  border-top-left-radius: 16px;
}

table tr:first-child td:last-child {
  border-top-right-radius: 16px;
}

table td:nth-child(2) {
  background-color: #7CCB99;
}
    <table>
  <tr>
    <td></td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search