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.

Regards,

Ronald

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

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