Solid Border for table widget suddenly appeared

0
Hi, the table widget in my project is suddenly displaying a solid black border, even though I haven’t applied any custom CSS. Please see the image below for reference. How I would like to remove the black border as it already happened to all tables too.Before :
asked
2 answers
0

This can happen even if no custom CSS was added. After an Atlas Core or Studio Pro upgrade, default table styles may change. A browser update can also affect how HTML table borders are rendered. Additionally, changes in the theme order under App Settings may cause a different base stylesheet to take precedence, resulting in borders being applied to all table widgets.


If you want to remove all borders globally without assigning a custom class, you can override the table widget’s default class. Add the following CSS to your custom stylesheet:

.mx-table,
.mx-table tr,
.mx-table td,
.mx-table th {
    border: none !important;
}

This targets the table widget’s own CSS classes and removes the outer border as well as all inner cell borders for every table in the application, ensuring consistent behavior across theme, Studio Pro, and browser updates.

----- EDITED -----

This CSS rule is used to remove borders only from the tables that you explicitly mark. In other words, it does not have a global effect; it affects only the tables to which you assign the remove-table-bordered class.


To use it, simply select the table from which you want to remove the borders and add

"remove-table-bordered" to the Class field. Once this class is applied, both the outer border of the table and all inner cell borders are completely removed.

.mx-table.remove-table-bordered,

.mx-table.remove-table-bordered tr,

.mx-table.remove-table-bordered td,

.mx-table.remove-table-bordered th {

border: none !important;

}







answered
0

Hi,

This is not coming from your domain model or microflow.It’s just default theme / bootstrap CSS being applied to table-based widgets.

Sometimes after:

  • Studio Pro upgrade

  • Theme update

  • Browser update

the default table border becomes more visible, even if you didn’t add any custom CSS.

To remove it, you’ll need a small CSS override.

Example:

.noTableBorder table,
.noTableBorder td,
.noTableBorder th {   
 border: none !important;
}

.noTableBorder table, .noTableBorder td, .noTableBorder th { border: none !important; }

Add noTableBorder to the Class property of the container / DataView that wraps the table.

That will remove the black border cleanly.Nothing wrong with your widget — it’s just styling.

answered