Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [gelöst]HTML Tabelle feste Spalten größe

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [gelöst]HTML Tabelle feste Spalten größe

    This topic has been deleted. Only users with topic management privileges can see it.
    • Chris76e
      Chris76e last edited by Chris76e

      Habe mehere HTML Tabellen wo alles gleich eingestellt ist, dennoch werden die Spalten unterschtlich breit dargestellt, wo liegt mein Fehler?

      Beispiel von einer Tabelle

      const STATE_IDS = [
        "statistics.0.temp.minmax.javascript.0.Wetterstation.Wind.dayMax",
        "statistics.0.temp.minmax.javascript.0.Wetterstation.Wind.weekMax",
        "statistics.0.temp.minmax.javascript.0.Wetterstation.Wind.monthMax",
        "statistics.0.temp.minmax.javascript.0.Wetterstation.Wind.quarterMax",
        "statistics.0.temp.minmax.javascript.0.Wetterstation.Wind.yearMax"
      ];
      
      
      const TABLE_ID = "0_userdata.0.Tabellen.TabWindMax";
      
      createTable();
      
      function createTable() {
        let tableData = getTableData();
        let tableHtml = generateTableHtml(tableData);
      
        let style = "width: 1300px; height: 105px;";
      
        setState(TABLE_ID, `<div style="${style}">${tableHtml}</div>`, true);
        //setTimeout(createTable, 5000);
      }
      
      function getTableData() {
        let tableData = [];
      
        for (let i = 0; i < STATE_IDS.length; i++) {
          let state = getState(STATE_IDS[i]);
      
          if (state && state.val != null) {
            let value = state.val;
            let lastChanged = formatDate(state.lc, i === 0);
            let name = STATE_IDS[i].split('.').pop();
      
            tableData.push({
              name: name,
              value: value,
              lastChanged: lastChanged
            });
          }
        }
      
        return tableData;
      }
      
      function generateTableHtml(data) {
        let tableHtml = "<table style='border-collapse: collapse;'>";
      
        const tdStyle = "font-size:22px;color: white;height: 28px;width: 235px;border: 1px solid white;text-align: center;";
      
        // Add new column for "Wind Max"
        tableHtml += `<td style='${tdStyle};width: 260px; border-top: 1px solid white; border-left: 1px solid white; border-bottom: 1px solid white;' rowspan='2'>Windgeschwindigkeit Max</td>`;
      
        data.forEach((item) => {
          tableHtml += `<td style='${tdStyle}'>${item.value} km/h</td>`;
        });
      
        tableHtml += "</tr><tr>";
      
        data.forEach((item) => {
          tableHtml += `<td style='font-size:20px;color: #ffb44d;height: 28px;width: 235px;border: 1px solid white;text-align: center;'>${item.lastChanged}</td>`;
        });
      
        tableHtml += "</tr></table>";
        return tableHtml;
      }
      
      
      
      
      function formatDate(timestamp, showDate) {
        let date = new Date(timestamp);
      
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let timeString = hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0')+ " Uhr";
      
        if (showDate) {
          return timeString;
        } else {
          let day = date.getDate();
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return day.toString().padStart(2, '0') + "." + month.toString().padStart(2, '0') + "." + year + " " + timeString;
        }
      }
      
      schedule("* * * * *", createTable);
      
      

      Screenshot 2023-02-19 142149.png

      OliverIO 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @Chris76e last edited by OliverIO

        @chris76e
        der text in der namensspalte (die erste mit dem namen drin) ist breiter als 260px
        und der browser weiß nicht wie er ohne (weitere) leerzeichen umbrechen soll.
        dann erweitert er von sich aus die Breite der Spalte.

        Mit den Developer Tools des Browsers, die alle schon eingebaut sind, kann man das bequem untersuchen und temporär zum ausprobieren anpassen, bis man die richtigen Einstellungen gefunden hat.

        Noch ein Tip: Wenn du vor der Tabelle noch den style bereich einfügst und
        dann bei den TDs nur noch

        <td class="firstcol">Text</td>
        

        dann machst du dir es mit dem formatieren einfacher und produzierst weniger text.

        <style>
        .firstcol {
           width: 260px; 
           border: 1px solid white;
           font-size:22px;
           color: white;
           height: 28px;
           text-align: center;
        }
        .datacol {
           font-size:22px;
           color: white;
           height: 28px;
           width: 235px;
           border: 1px solid white;
           text-align: center;
        }
        .lastchanged {
           font-size:20px;
           color: #ffb44d;
           height: 28px;
           width: 235px;
           border: 1px solid white;
           text-align: center;
        }
        </style>
        
        Chris76e 1 Reply Last reply Reply Quote 0
        • Chris76e
          Chris76e @OliverIO last edited by

          @oliverio Danke, versuche das umzusetzten, Haben aber den eigentlichen Fehler gefunden in der Zeile let style = "width: 1700px; height: 80px;"; war width auf 1300px gestellt.

          Screenshot 2023-02-19 212029.png

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Support us

          ioBroker
          Community Adapters
          Donate

          394
          Online

          31.9k
          Users

          80.3k
          Topics

          1.3m
          Posts

          2
          3
          164
          Loading More Posts
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes
          Reply
          • Reply as topic
          Log in to reply
          Community
          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
          The ioBroker Community 2014-2023
          logo