The table looks bad on my mirror, better on the computer.

[alexbergsland]

On my computer the table looks good, with even spacing.
But on my actual mirror, raspberry with its web browser the spacing is off. It is lined up but there is no spacing.
I guess I could solve it with descriptiveRow and even make it invisible but that would add on the height.
Any ideas? Maybe an option to make the width fixed?

Firefox on Windows

MagicMirror

json

{
  "domoticz": [
    {
      "name": "Temp ute / uppe / nere",
      "value1": " ",
      "value2": "8.0 C",
      "value3": "23.2 C",
      "value4": "Error"
    },
    {
      "name": "Sval / Varm/ Sol / Luftf.",
      "value1": "22.9 C",
      "value2": "26.2 C",
      "value3": "27.2 C",
      "value4": "60%"
    },
    {
      "name": "Majken får mat",
      "value1": " ",
      "value2": " ",
      "value3": "om",
      "value4": "7 dagar"
    },
    {
      "name": "Lilla garagedörren",
      "value1": " ",
      "value2": " ",
      "value3": " ",
      "value4": "Låst"
    },
    {
      "name": "FTX / Garage / VVB",
      "value1": " ",
      "value2": "100 W",
      "value3": "14 W",
      "value4": "293 W"
    },
    {
      "name": "Server / Terrarium",
      "value1": " ",
      "value2": " ",
      "value3": "73 W",
      "value4": "148 W"
    },
    {
      "name": "Förbrukning idag",
      "value1": " ",
      "value2": " ",
      "value3": "10.6 kWh",
      "value4": "19.6 kr"
    }
  ]
}

jsontable.php

$sendback0 = array( 'name' => 'Temp ute / uppe / nere', 'value1' => ' ', 'value2' => $tempute, 'value3' => $tempuppe, 'value4' => $tempnere );
$sendback1 = array( 'name' => 'Sval / Varm/ Sol / Luftf.', 'value1' => $tempsvalzon, 'value2' => $tempvarmzon, 'value3' => $tempsolplats, 'value4' => $luftfuktighet );
$sendback2 = array( 'name' => $majkenheader, 'value1' => ' ', 'value2' => ' ', 'value3' => $majkenheader2, 'value4' => $daystogo );
$sendback3 = array( 'name' => 'Lilla garagedörren', 'value1' => ' ', 'value2' => ' ', 'value3' => ' ', 'value4' => $string_door );
$sendback4 = array( 'name' => 'FTX / Garage / VVB', 'value1' => ' ', 'value2' => WattORkiloWatt($ftxPower), 'value3' => WattORkiloWatt($lvpGaragePower), 'value4' => WattORkiloWatt($NibePower) );
$sendback5 = array( 'name' => 'Server / Terrarium', 'value1' => ' ', 'value2' => ' ', 'value3' => WattORkiloWatt($serverPower), 'value4' => WattORkiloWatt($terrariumPower) );
$sendback6 = array( 'name' => 'Förbrukning idag', 'value1' => ' ', 'value2' => ' ', 'value3' => $forbrukning . ' kWh', 'value4' => $elkostnad . ' kr' );

$sendback['domoticz'] = array( $sendback0, $sendback1, $sendback2, $sendback3, $sendback4, $sendback5, $sendback6 );

header('Content-type:application/json;charset=utf-8');
echo json_encode( $sendback, JSON_PRETTY_PRINT ) ;

config.js

{
        module: 'MMM-JsonTable',
        position: 'top_right',
        //header: 'Majken',
        config: {
                url: 'http://192.168.44.15/jsontable.php', // Required
                arrayName: 'domoticz', // Optional
		updateInterval: 60000, //Milliseconds between the refersh 
		//keepColumns: ["name", "value1", "value2", "value3", "value4"],
        }
},

[timdows]

I know some browsers have margin and padding enabled (this might be the case on the raspbian webbrowser)
And this might be pushing all items inwards so it might appear they dont have spacing

From your image I cannot see if there are left/right more modules that use the space

Try adding the following style to the MagicMirror
My custom style is in css/custom.css

body {    
    margin: 0 !important;
    padding: 0 !important;
}

[alexbergsland]

Thank you.

However, I saw no change except for modules moving, due to what is usually in my custom.css

body {
       margin: 20px;
       height: calc(100% - 40px);
       width: calc(100% - 40px);
       zoom: 105%;
}

When trying your example I commented out the above.
The JsonTable did not change.

[dathbe]

You probably need to get more specific with the CSS. body will be the parent element, with many sub elements. I'm no CSS expert, but I believe that if a more specific element has one of those properties set, it will override body. Youc ould try adding !important to the end of each of those lines, just before the ;, and that may work, but you're better off digging deeper into the existing CSS by inspecting the webpage and finding the element you actually want to change.