Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

tabelle dritteln





Frage

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 1 von rfb

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

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

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

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

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

Antwort 6 von chillo

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!

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: