• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Adjust individual table column widths?

Scheduled Pinned Locked Moved Custom CSS
7 Posts 3 Posters 1.1k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    jimmy_382837
    last edited by Sep 20, 2023, 4:17 PM

    is there a way to adjust the individual column widths on a table in custom.css?

    i am using the MMM-openweathermapforecast, which is fantastic module.

    the hourly forecast is in a little table as pasted below, and i’m trying to adjust the individual column widths so that there’s no linebreak when the text exceeds the width.

    i tried table-layout: auto and table-layout: fixed with a width %, but both seem to either do nothing, or adjust all column widths to the same thing. is there a way to say col 1 should be X%, col 2 should be y%, and so on?

    a0a57187-0945-483a-ab6b-6d8c9c2bad27-image.png

    S M 2 Replies Last reply Sep 21, 2023, 3:07 AM Reply Quote 0
    • S Away
      sdetweil @jimmy_382837
      last edited by Sep 21, 2023, 3:07 AM

      @jimmy_382837 I think it takes additional html, not just styles

      https://stackoverflow.com/questions/928849/setting-table-column-width

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @jimmy_382837
        last edited by MMRIZE Sep 21, 2023, 6:15 PM Sep 21, 2023, 6:14 PM

        @jimmy_382837
        What is your config now for your result? I cannot guess your configs.

        J 1 Reply Last reply Sep 24, 2023, 1:22 PM Reply Quote 0
        • J Offline
          jimmy_382837 @MMRIZE
          last edited by Sep 24, 2023, 1:22 PM

          @MMRIZE my current config looks like this

          {
          	module: "MMM-OpenWeatherForecast",
          	position: "top_right",
          	config: {
          		apikey: "xx", 
          		latitude: 30.266666,            
          		longitude: -97.733330,         
          		requestDelay: 1500,
          		units: "imperial",
          		forecastHeaderText: "",
          		forecastLayout: "table",
          		hourlyForecastTableHeaderText: "",
          		hourlyForecastInterval: 3,
          		  extraCurrentConditions: {
          				highLowTemp: true,
          				precipitation: true,
          				sunrise: true,
          				sunset: true,
          				wind: false,
          				barometricPressure: false,
          				humidity: false,
          				dewPoint: false,
          				uvIndex: false,
          				visibility: false
          				},
          			hourlyExtras: {
          				precipitation: true,
          				wind: true,
          				barometricPressure: false,
          				humidity: true,
          				dewPoint: false,
          				uvIndex: false,
          				visibility: false
          				},
          		showDailyForecast: false,
          		}
          },	
          

          i am trying to edit the column widths on the hourly forecast table. i have tried all of the below in the custom.css, but none seem to work.

          .MMM-OpenWeatherForecast .forecast-container.hourly {
            table-layout: fixed;
          }
          
          
          
          .MMM-OpenWeatherForecast .wrapper.table .forecast-container .forecast-item {
              table-layout: fixed;
          }
          
          
          .MMM-OpenWeatherForecast .wrapper.table .forecast-container .forecast-item .forecast-icon-container {
              width: 30px;
          }
          

          ideally, i’d like to set a specific width for each column. e.g., the time is 30 px, conditions are 35 px, temperature is 45 px, and so on.

          S 1 Reply Last reply Sep 24, 2023, 1:29 PM Reply Quote 0
          • S Away
            sdetweil @jimmy_382837
            last edited by sdetweil Sep 24, 2023, 1:31 PM Sep 24, 2023, 1:29 PM

            @jimmy_382837 did u see this from the link I posted…

            Screenshot at 2023-09-24 08-26-21.png

            note that the TH for the columns MUST has a class
            OR
            you have to the the :nth-child() type selector

            tr:nth-child(1) 
            

            would be the same element as the

            <th class="from"...>
            

            https://www.w3schools.com/cssref/css_selectors.php

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Sep 24, 2023, 10:04 PM Reply Quote 0
            • M Offline
              MMRIZE @sdetweil
              last edited by Sep 24, 2023, 10:04 PM

              I haven’t examined the rendered HTML yet, but hardcoded style attributes in HTML code are prior than CSS.
              In case; You should modify source code of the module to change the result. (Or consider to use monkey-patch)

              M 1 Reply Last reply Sep 25, 2023, 7:33 AM Reply Quote 0
              • M Offline
                MMRIZE @MMRIZE
                last edited by Sep 25, 2023, 7:33 AM

                @jimmy_382837
                @MMRIZE said in Adjust individual table column widths?:

                I haven’t examined the rendered HTML yet, but hardcoded style attributes in HTML code are prior than CSS.
                In case; You should modify source code of the module to change the result. (Or consider to use monkey-patch)

                The rendered result is not hard-coded, so you can adjust it with only CSS.

                This is an example. (Anyway, your config was not exactly matched with your previous screenshot…)

                
                .MMM-OpenWeatherMapForecast .module-content {
                  width: inherit;
                  /* I don't know why, but it was defined as 300px, might be an issue when you adjust the dimension. so have to reset */
                }
                
                .MMM-OpenWeatherMapForecast,
                .MMM-OpenWeatherMapForecast .wrapper {
                  width: 500px; 
                  /* give a custom width to a module */
                }
                
                .MMM-OpenWeatherMapForecast .forecast-item .time {
                  /* Some customizing for `time` cell for example.*/
                  width: 200px;
                  background-color: rgb(127 127 127/ 50%);
                  color: white;
                  font-weight: bold;
                }
                

                702a0fac-1c29-4e4a-87a6-1fbcda563fa4-image.png

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                1 / 1
                • First post
                  1/7
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy