Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon chillo vom 29.05.2019, 11:19 Options

tabelle dritteln

hallo!

ich hab ne html-tabelle, die laufend editiert wird (länger wird). da die breite sehr gering ist, möchte ich, dass die tabelle nach je einem drittel umgebrochen und nebeneinander dargestellt wird.
hoffe es ist verständlich, sonst fragt nochmal nach.

danke!

Antwort schreiben

Antwort 1 von rfb vom 29.05.2019, 12:58 Options

Was genau hindert dich daran das* zu machen?

* Tabelle in drei Teile, Kopf und Fuß jeweils ergänzen, mittels CSS-

float

nebeneinander darstellen.

Antwort 2 von chillo vom 29.05.2019, 13:40 Options

der springende punkt ist, dass sich die tabelle laufend ändert (siehe oben^^). erschwerend kommt hinzu, dass die tabellenzeilen in der höhe stark variieren. momentan arbeite ich mit drei tabellen nebeneinander. es ist aber sehr nervig, jedesmal, mit mehreren anläufen, per augenmass und copy und paste, so lange zeilen zwischen den tabellen auszutauschen, bis alle ungefähr gleich lang sind.
ich suche nach einer lösung, bei der mir die maschine das abnimmt.

Antwort 3 von rfb vom 30.05.2019, 08:30 Options

Sinnvoll und einfach wäre sowas mittels einer PHP-basierten Datenverwaltung serverseitig zu machen. Wenn sich die Daten "laufend ändern" ist eine PHP/MySQL-Anwendung sowieso zu empfehlen.

Userseitig gibts natürlich JavaScript, welches aber relativ unzuverlässig ist.

Bei beiden Varianten wäre es aber nur möglich die Anzahl der Datensätze einfach durch 3 zu teilen und dann entsprechend aufzuteilen. Dein "Augenmass" haben Scriptsprachen nicht.
Bei der PHP-Variante passiert dies bei der Seitenerstellung (im Prinzip so wie du es bislang von Hand machst), bei einer JavaScript-Lösung indem die Daten erst in einer Tablle vorliegen und dann mittels appendChild die unteren 2/3 zeilenweise in neu generierte Tabellen umgehängt werden.

Was bislang völlig fehlt in deinen Angaben sind deine Möglichkeiten und Fähigkeiten!

Antwort 4 von rfb vom 30.05.2019, 15:11 Options

hier mal ein JavaScript (einzufügen in den head-bereich der Seite oder auszulagern:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Kopf, K&ouml;rper und Fu&szlig; einer Tabelle definieren - thead, tfoot, tbody</title>
<script type="text/javascript">
function tabelle_stueckeln(tabelle,teile) {
var t=document.getElementById(tabelle);
if (!t || isNaN(teile) || teile<1) return;
var ts=Math.floor(teile);
var altbody=t.getElementsByTagName("tbody")[0];
var zeilen=altbody.getElementsByTagName("tr");
var anz=zeilen.length;
var rest=anz%ts;
var cut=(anz-rest)/ts;
for (var j=1; j<ts; j++) {
var newTab=t.cloneNode(true);
t.parentNode.appendChild(newTab);
newTab.id=tabelle+j;
var newbody=newTab.getElementsByTagName("tbody")[0];
var kids=newbody.childNodes;
for (var z=kids.length-1; z>=0; z--) {
newbody.removeChild(kids[z]);
}
var bleibt=cut+((rest>0)?1:0);
rest--;
for (z=0; z<cut+((rest>0)?1:0); z++) {
newbody.appendChild(zeilen[bleibt])
}
t.parentNode.appendChild(newTab);
}
}
window.onload=function() {
tabelle_stueckeln("teilmich",3)
}
</script>
</head>
<body>

<h1>Betroffene Menschen</h1>

<table border="1" rules="groups" id="teilmich">
  <thead>
    <tr><th>Nr</th>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr><td>-</td>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr><td>1</td>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr><td>2</td>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr><td>3</td>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr><tr><td>4</td>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr><td>5</td>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr><td>6</td>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr><tr><td>7</td>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr><td>8</td>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr><td>9</td>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr><td>10</td>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr><td>11</td>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

<p><a href="../aufbau.htm#kopf_koerper_fuss">zur&uuml;ck</a></p>
</body>
</html>

nach dem Laden der Seite (onload) wird die Funktion tabelle_stueckeln aufgerufen mit der ID der Tabelle (hier "teilmich" und der Anzahl der Stückchen).

Antwort 5 von rfb vom 30.05.2019, 16:53 Options

seh gerade, ein t.parentNode.appendChild(newTab); ist zuviel - das erste zu streichen ist geschickter!

Antwort 6 von chillo vom 30.05.2019, 20:53 Options

danke für deine mühe! aber javascript steht nicht zur verfügung, und mit zeilenzählen ist das problem nicht ansatzweise in den griff zu kriegen.
mit php wärs machbar, aber ich hab wenig zeit, und das problem keine hohe priorität.
wollte eigentlich nur wissen, ob es eine schnelle lösung mit html/css gibt, was wohl nicht der fall zu sein scheint. schade!

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken