tabelle

[Daniel]

Hi,
ich hab da ein problemchen, und zwar erstell ich mit PHP dynamisch ne
tabelle, diese ist in einem Div. ich weis nid so toll aber egal. der
tabelle hab ich die breite von 100% gegeben. allerdings wird diese wenn
ein eintrag zu lang ist (ohne leerzeichen) verbreitert, wie kann ich das
verhindern? mit CSS? oder muss ich da was mit PHP machen? wie kann ich
mit PHP wörter korekt trennen?

MfG

[Stefano Albrecht]

Hi,

Hallo :)

ich hab da ein problemchen, und zwar erstell ich mit PHP dynamisch ne
tabelle, diese ist in einem Div. ich weis nid so toll aber egal. der
tabelle hab ich die breite von 100% gegeben. allerdings wird diese wenn
ein eintrag zu lang ist (ohne leerzeichen) verbreitert, wie kann ich das
verhindern? mit CSS?

Nein.

oder muss ich da was mit PHP machen? wie kann ich
mit PHP wörter korekt trennen?

Splitte den String in ein Array auf, wobei das Trennzeichen das Leerzeichen ist (mit explode();). Überprüfe danach, ob ein Element dieses Arrays länger ist, als es sein darf (mit strlen();). Wenn der String zu lang ist, füge in der Mitte (nur ein simples Beispiel) ein Leerzeichen ein (setze einen neuen String mit substr(); zusammen). Füge am Ende alle Elemente des Arrays zu einem String zusammen (mit implode();).

MfG

Schönen Mittwoch noch ;~D
Stefano Albrecht

[Daniel]

Hi,

Splitte den String in ein Array auf... Überprüfe danach, ob ein Element dieses Arrays länger ist, als es sein darf... füge in der Mitte ein Leerzeichen ein... Füge am Ende alle Elemente des Arrays zu einem String zusammen...

danke für die mühe, wie ich da vorzugehen hab ist mir schon klar, der
der string eh u.U. viel zu lang ist kürze ich ihn sowieso, ist da aber
überhaupt kein leer drin kürze ich ihn an der maximallänge. bzw. wenn
das erste wort zu lang ist. also muss ich theoretisch da nur die Maximal
länge runtersetzten, bzw. das ganze breiter machen, da das aber nicht
alzu schön ist werde ich bei der ausgabe die eben von dir erwähnte
möglichkeit wohl in betracht ziehen und den gekürtzten string nochmals
prüfen. allerdings werd ich kein leerzeichen einfügen sonder "- " damits
für den betrachter ersichtlich ist das hier getrennt wurde. da dies
aber dann aber "rechtlich" gesehen unter umständen nicht richtig
gekürtzt ist wollt ich fragen obs da ne möglichkeit gibt. da man aber
die eitnräge in der DB auch editieren kann kann man dies dann, weil mans
dann ja sieht das das wort zu lang ist ändern und dort manuell trennen.

nochmals danke für deine Mühen.

MfG

[Gernot Back]

Hallo Daniel,

allerdings werd ich kein leerzeichen einfügen sonder "- " damits
für den betrachter ersichtlich ist das hier getrennt wurde.

dafür gibt es ­ (Soft-Hyphen, den "weichen" Umbruch). Leider funktioniert das nicht in allen Browsern.

Gruß Gernot

[Gernot Back]

Hallo Daniel,

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.

Gruß Gernot

[Daniel]

Hi,

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.

das DIV element hat overflow auto, dieser scrollbalken ist aber extrem
unerwünscht. werd das mit dem layout-fixed morgen ausprobiern, jetzt
mach ich erstma feierabend.

MfG

[Stefano Albrecht]

Hallo Daniel,

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.

Wesentlich besser.

Gruß Gernot

Euch allen noch einen super Mittwoch.
Stefano Albrecht

[Daniel]

Hi,

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.

kann es sein das bei table-layout: fixed alle spalten gleichbreit werden?

MfG

[MudGuard]

Hi,

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.
kann es sein das bei table-layout: fixed alle spalten gleichbreit werden?

Ja, das kann (mehr oder weniger zufällig) sein. Muß es aber nicht.
Hängt natürlich davon ab, ob und wenn ja welche Breiten für die Spalten vorgegeben werden - sind die alle gleich breit definiert (und die Summe der Spaltenbreiten steht nicht im Widerspruch zur evtl. gegebenen Tabellenbreite *) ), werden auch bei table-layout:fixed alle Spalten gleich breit.

*) im Falle von Widersprüchen gewinnt die Tabellenbreite. Der Überschuß oder Mangel an Zellenbreiten wird im Verhältnis derer Breiten auf die Spalten verteilt (bsp: table-breite: 1000, spalte 1:100, spalte 2:400 vorgegeben ==> Spalte 1:200, Spalte 2: 800)

cu,
Andreas

[Daniel]

Hi,
ich glaub du hast mich falsch verstanden. ich habe diesen code:

  
<table style="table-layout:fixed; width:25em;">  
  <tr style="width:100%">  
    <th style="width:100%" colspan="2" align="center">News</th>  
  </tr>  
  <tr style="width:100%">  
    <td style="width:1em;">&Uuml;berschrift: </td>  
    <td style="width:2em;">text</td>  
  </tr>  
  <tr style="width:100%">  
    <td style="width:1em;">Nachricht: </td>  
    <td style="overflow:auto; width:2em;">ganz viel text</td>  
   </tr>  
</table>  

allerdings ist die linke spalte trotzdem genauso breit wie die rechte. zuerst hat ich die angaben nur in der ersten zeile (Überschirft) dann hab ichs noch auf die andern gemacht. alles ohne erfolg, beide spalten nehmen nachwievor jeweils 50% der tabelle ein

MfG

[MudGuard]

Hi,

ich glaub du hast mich falsch verstanden. ich habe diesen code:

<table style="table-layout:fixed; width:25em;">
  <tr style="width:100%">
    <th style="width:100%" colspan="2" align="center">News</th>
  </tr>
  <tr style="width:100%">
    <td style="width:1em;">&Uuml;berschrift: </td>
    <td style="width:2em;">text</td>
  </tr>
  <tr style="width:100%">
    <td style="width:1em;">Nachricht: </td>
    <td style="overflow:auto; width:2em;">ganz viel text</td>
   </tr>
</table>

> allerdings ist die linke spalte trotzdem genauso breit wie die rechte.  
  
Du hast ja auch für die Spalten keine Breitenangaben gemacht (nur für einzelne Zellen).  
Also sind für table-layout:fixed alle Spalten gleich breit.  
  
Füge  
<col style="width:1em"><col style="width:2em">  
ein.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Stefano Albrecht]

Hi,

Grüß Gott Daniel ;)

gib deiner tabelle doch mal table-layout:fixed und/oder dem umschließenden DIV-Element overflow:auto.
kann es sein das bei table-layout: fixed alle spalten gleichbreit werden?

Ich kann nur davon behaupten, dass es bei mir nicht funktioniert...

MfG

Freundliche Grüße
Stefano ALbrecht

[Daniel]

Hi,

Ich kann nur davon behaupten, dass es bei mir nicht funktioniert...

funktioniert nicht gibts nicht. falls du meinst das überlangewörter
drüber hinausgeschrieben werden oder versteckt(je nach overflow
einstellung) das problem hab ich auch. deshalb habe ich nun zusätzlich
noch die automatische wörtertrennung dabei. werde aber wohl da ich denke
das die performancemäsig besser ist ein prüfung vor der speicherung in
die DB machen und eine entsprechende fehlermeldung ausgeben.

MfG

[Gernot Back]

Hallo Daniel,

falls du meinst das überlangewörter
drüber hinausgeschrieben werden oder versteckt(je nach overflow
einstellung) das problem hab ich auch. deshalb habe ich nun zusätzlich
noch die automatische wörtertrennung dabei. werde aber wohl da ich denke
das die performancemäsig besser ist ein prüfung vor der speicherung in
die DB machen und eine entsprechende fehlermeldung ausgeben.

ich habe dir mal was gebastelt, was dich vielleicht inspiriert. Manches ist mit Rücksicht auf unterschiedliche Browser doppelt-gemoppelt. Schau halt mal, was du davon gebrauchen kannst. Worauf es aber nach meinem Dafürhalten vor allem ankommt, ist den Browsern so viele im Konflikt stehende Angaben wie möglich zu ersparen:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Tabelle in Spaltenbreitenverhältnis 1:2 mit overflow:auto-Zelle</title>  
<style type="text/css">  
[code lang=css]  
table {  
  border-collapse:collapse;  
  table-layout:fixed;  
  width:24em;  
}  
  
thead, tbody, tr {  
  width:inherit;  
}  
  
thead th {  
  font-weight:bold;  
  border:solid 1px black;  
  width:100%;  
}  
  
tbody th, tbody td {  
  border:solid 1px black;  
  text-align:left;  
  font-weight:normal;  
  vertical-align:top;  
}  
  
.einf {  
  width:8em;  
}  
  
.dopp {  
  width:16em;  
}  
  
td.dopp div {  
  position:relative;  
  width:16em;  
  height:2.25em;  
}  
  
td.dopp div div{  
  position:absolute;  
  top:0;  
  width:16em;  
  overflow:auto;  
}

</style>
</head>
<body>
<table>
  <colgroup>
    <col class="einf" width="33%">
    <col class="dopp" width="67%">
  </colgroup>
<thead>
  <th colspan="2">News</th>
</thead>
<tbody>
  <tr>
    <th class="einf">&Uuml;berschrift: </th>
    <th class="dopp">text</th>
  </tr>
  <tr>
    <th class="einf">Nachricht: </th>
    <td class="dopp">
      <div>
        <div>
          Do&shy;nau&shy;dampf&shy;schiff&shy;fahrts&shy;ka&shy;pi&shy;täns&shy;müt&shy;zen&shy;ver&shy;leih
        </div>
      </div>
    </td>
   </tr>
</tbody>
</table>
</body>
</html>
[/code]

Gruß Gernot

[Daniel]

Hi,
danke sieht nicht schlecht aus, das ich nicht selsbt auf die idee gekommen bin ein div da reinzuschmeißen, was ich aber nicht versteh ist warum das eine div im andern ist. und was ist width:inherit;?

MfG

[Gernot Back]

Hallo Daniel,

danke sieht nicht schlecht aus, das ich nicht selsbt auf die idee gekommen bin ein div da reinzuschmeißen, was ich aber nicht versteh ist warum das eine div im andern ist. und was ist width:inherit;?

http://www.css4you.de/wscss/css08.html#inherit

Die doppelte Verschachtelung der DIV-Elemente innerhalb der Tabellenzelle ist erforderlich, weil sich ein absolut positioniertes Element immer auf das nächste Elternelement bezieht, das nicht die Normaleinstellung position:static hat.

Da das aber bei einer Tabellenzelle leider der Fall ist, und sich das DIV-Element sonst möglicherweise auf den absoluten Nullpunkt (Viewport) des Fensters beziehen würde, muss man da halt noch ein relativ positioniertes Element zwischen die Tabellenzelle und das absolut positionierte Element schalten, damit letzteres den richtigen Orientierungspunkt bekommt.

Gruß Gernot

[Gernot Back]

Hallo Daniel,

danke sieht nicht schlecht aus,

Ich habe noch ein wenig weiterexperimentiert: Wenn mal mehr Text als nur ein Wort in der bewussten Scrollzelle steht, ist es mit Rücksicht auf Firefox/Mozilla wohl besser, die folgenden Klassen in etwas dieser Art zu definieren:

  
.dopp {  
  width:16em;  
  padding-bottom:.9em;  
}  
  
td.dopp div {  
  position:relative;  
  height:2.2em;  
  margin:0;  
}  
  
td.dopp div div{  
  position:absolute;  
  top:0;  
  right:-2px;  
  width:16em;  
  height:3.1em;  
  overflow:scroll;  
}

Gruß Gernot