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

[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);

[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]

@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.