How to Update and Customize Table Padding or Borders in CSS

I forgot the images.

Hii @giordy,
Can you please elaborate how to reproduce the issue?

I'm migrating the site from d9 to d10, so I copied the nodes from the old site to the new one.
The source code of the two sites is identical, but the theme has changed.

Hi @giordy
I have created and reviewed the table, confirming the presence of the padding issue. The border-0 property is functioning correctly. The bottom border you are observing is due to custom CSS, not the border-0 property. The border-0 property is displaying no border.

borde-bottom is located on solo.table.css

.page-wrapper tr {
  border-bottom: 1px solid var(--r-br, var(--r-br-b));
}

Do you want me to remove this border-bottom?

border-bottom must not be present.

@giordy Updated the MR as per your feedback.

flashwebcenter → closed merge request !3

Hello,
You need to use ID selector specificity to override the default css. In this example it will be:

#page-wrapper table tr {
  border-bottom: none;
}

#page-wrapper table tr td,
#page-wrapper table tr th {
  padding: 4px 6px;
}

This code is incorrect:

table tr td th {
 padding: 4px 6px!important;
}

Best wishes,
Alaa

Thanks, now borders and padding are correct, even if the internal borders are black and not the theme color.

However, there is a problem: all tables in the views are borderless.
In the old site I solved it by adding a class:

.border-bottom: 1px solid #BCC8AD;

and centered the text with:

text-align-center

In the new site these classes do not work in views.

Compare:
https://www.gmpe.it/notiziario
https://prova.gmpe.it/notiziario

Thanks and best regards

P.S.
Why are there no icons in views and files?

Hello,
You can use the same thing you did before:

#page-wrapper .view table tbody tr {
  border-bottom: 1px solid #BCC8AD;
}

#page-wrapper .view table tr td,
#page-wrapper .view table tr th {
  text-align:center;
}

New icons were added to the theme https://unitedstarsofamerica.com/user-interface-components/drupal-solo-theme-over-60-svg-file-type-icons-403

Best wishes,
Alaa

Thanks, it works, but it's not the appropriate solution.

1
I found that the color and size of the table border depends on the browser (table1)

2
This CSS applies to all views but some views do not need to have a border or centered text, for example the calendar.

3
The calendar, in addition to the border, has vertical dates. Depends on what?
Compare:
https://www.gmpe.it/eventi
https://prova.gmpe.it/eventi-0

4
I also have to insert other classes directly into the views but none of them work. I don't know if it depends on drupal 10 or the theme.

Thanks and best regards

Hello,
1- Override Browser Default Styles:
The browser may have some default styles, but you can override them. In your sub-theme, make sure to use !important if necessary.

#page-wrapper .view table tbody tr {
  border-bottom: 1px solid #BCC8AD !important;
}

2- Exclude or Override Specific Views:
You can exclude specific view classes or override them.

#page-wrapper .view table tbody tr:not(.view-vista-calendari) {
  border-bottom: 1px solid #BCC8AD !important;
}

3- Debugging Calendar Issues:
If something in the calendar isn't working correctly, try adding a background color to the data-box row. This can help identify issues with the table.

4- Defining Classes in Sub-Theme:
Any classes you add in the views must be defined in the sub-theme. Use the browser inspector to accurately target your sections.

Best wishes,
Alaa

1
The icons are beautiful! Thank you!

2
I didn't create the calendar view but it is part of the Calendar module.

#page-wrapper .view table tbody tr:not(.view-calendar-view) {
 border-bottom: 1px solid #BCC8AD !important;
}

it doesn't work and the border is still there.

3
The vertical date depends on the padding present in the module's css. The problem is solved with:

#page-wrapper .calendar-calendar div.day {padding: 0 !important;}

Thanks and best regards

I solved the border issue in the calendar by applying css for each view.

Best regards