CSS question regarding padding

The standard padding for mx tables is 8px (at least when I inspect the tables with firebug) .mx-table th, .mx-table td { padding:8px; vertical-align:top; } I would like to change this padding to 1px across my entire application, but as I have no CSS experience I'm not sure how to do this. Could anybody please provide some help with how I can accomplish this?
4 answers

As the tutorial is a bit outdated: Create a folder with name css in your theme folder. Get the default theme.css from your deployment dir and copy this in the css folder. Add something like below to the end of the file:

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 1px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;

Redeploy your app and the change to your padding should be visible. Tested in Mx 5.9.1


I would start with the theming beginners course Once you know how to adjust a current theme it's a breeze.




Thanks for the heads up Erwin, but that still doesn't seem to get the desired effect (the fault in this is probably on my end but I'm just gonna make sure i get my point across)

Currently all my ''tables'' look like this (mendix seems to use a rather large padding between rows)



The second images still isn't ideal, but would save about half of the screen space and would help me alot. Any idea how I can accomplish this?

I've tried adding a class (as suggested by Erwin and David) as you can see in screenshot below, but it doesnt seem to change anything:

.Myclass .mx-table th, .mx-table td { padding: 1px !important; }

alt text


For general data layout, try:

.mx-table th, .mx-table td {
    padding: 1px !important;

To apply to just some of your table layouts, set a Class name (like Myclass) to the table container and use the CSS:

.Myclass .mx-table th, .mx-table td {
    padding: 1px !important;