Rounding artefacts with dark table row

[RamonvdW]

global.scss contain this style:

td, th{
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px;  // this causes issues
}

The border radius is not visible when the table cell background color is identical to all cells around it.
When highlighting a table row by changing the background color, the area between each adjacent td in that row shows the rounding effects: a few white pixels on every corner.

Material design does not specify any rounding on table cells.
See https://material.io/archive/guidelines/components/data-tables.html

Snippet to reproduce the issue:

<table class="white">
   <tr><td>First</td><td>Second</td><td>Third</td></tr>
   <tr class="darkgreen"><td>First</td><td>Second</td><td>Third</td></tr>
   <tr><td>First</td><td>Second</td><td>Third</td></tr>
<table>

Example:

I have not found any component in materializecss where the border rounding of td or th elements is useful. I might have missed one - please reply and let me know.

Proposed solution: change line marked above from 2px to 0.

Environment:

• Visible with Chrome version 91.0 (and many versions back) on Debian 10 and Windows 10
• Not visible with Firefox 78.10

[Smankusors]

Honestly, I'm just realized the app that I have developed for 3 years have a CSS override like this.

td,th {
	border-radius: 0 !important;
}

Stupid past me 🤦, there's no documentation why this CSS rule exist. Perhaps this artefact is the reason...

---

Looking on the commit from 7 years ago, I don't think there's any reason removing border-radius would cause any UI problem. Feel free to create a PR to fix this issue. The line you looking is here :

materialize/sass/components/_global.scss

Line 446 in eb04cbf

border-radius: 2px;

---

On the other hand, there's border-radius: 0 if you use striped class. Perhaps if line above removed, these lines are also safe to removed?

materialize/sass/components/_global.scss

Lines 417 to 419 in eb04cbf

	> tr > td {
	border-radius: 0;
	}

What do you think about this? Safe to remove both of these rules? @materializecss/members

[roiLeo]

I can't find the purpose of using border-radius in table cells, I think we can safely remove it.