Tips for eliminating overlapping borders in a table using CSS

Question

Tips for eliminating overlapping borders in a table using CSS

I've encountered an issue with my table where the border becomes darker and thicker at the intersection of two cells. Is there a way to resolve this problem? I have included my CSS code below.

.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;
}

Link to view the table image

Changing 'border-collapse' to 'collapse' makes the border thinner, but removes the border radii as well. Any suggestions for finding a solution?

html css

Answer 1

Answer №1

Apply unique borders to each <td>, without using 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>

Answer 2

Apply unique borders to each <td>, without using 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>

Tips for eliminating overlapping borders in a table using CSS

Answer №1

Similar questions

What is the step-by-step process for implementing basic data validation in PHP?

Creating a form that can identify both letters and numbers using JavaScript

Separators can be implemented to enhance the visual distinction between arrow icons and text within

Tips on merging HTML node lists from various `getElement`s

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

The alignment of labels and text inputs using CSS flexbox is not correct

The animation of the background color over an image appears glitchy when viewed on Safari

retrieve the position of a descendant element in relation to its ancestor element

Ensure that the text within the ng-repeat is wrapped in a span element and each

Working with the visibility of a button using JavaScript

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Discover the magic of gradients in tooltips with Bootstrap 5!

Can data be transmitted to two separate scripts simultaneously?

Is there a way to center text of varying lengths vertically and allow it to wrap around a floating image?

Items are overflowing the flex container, exceeding its boundaries

What is the best way to ensure that an image fills the entire page in Bootstrap 4 by setting a maximum height for both the column and container

Tips for horizontally aligning a list with sublist using CSS

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Is there a way to adjust the opacity of a background image within a div?

How can HTML and CSS be linked to display images independently?