Zur Navigation

Tabelle - Spaltenbreite begrenzen

1 andyd

Hallo, ich hab wiedermal eine Frage!

ich habe in einer Tabelle eine Spalte mit width="200" begrenzt. Wenn jetz allerdings der Text in der Spalte länger als 200 wird, dann wird die Größenangabe außer Kraft gesetzt und die Spaltenbreite automatisch gestreckt. Genau dies möchte ich nicht.
Wenn der Text größer als 200 ist, soll er abgeschnitten werden.

Daraufhin habe ich im internet gesucht und etwas gefunden, nur leider funktioniert diese Variante nur im FF einwandfrei aber der IE muckt wieder rum...

das is die changetext.js


function searchChangeText()
{
 a = (document.all) ? document.all : document.getElementsByTagName("*");
 for(var i=0; i<a.length; i++)
 {
  if(a[i].getAttribute("title") && a[i].getAttribute("title") == "CT")
   ChangeText(a[i].id);
 }
}

function ChangeText(id)
{
 if(getTextLength(id)>200)
 {
  document.getElementById(id).title = document.getElementById("TextContent").innerHTML;
  while(getTextLength()>188) //maximal verfügbare breite - Textlänge von "..."
   document.getElementById("TextContent").innerHTML=cut();
  document.getElementById(id).innerHTML=document.getElementById("TextContent").innerHTML+"...";
 }
 else
  document.getElementById(id).title = "";

}

function cut()
{
 return document.getElementById("TextContent").innerHTML.substr(0, document.getElementById("TextContent").innerHTML.length - 1);
}

function getTextLength(id)
{
 if(!document.getElementById("TextContent"))
  document.getElementsByTagName("body")[0].innerHTML+="<nobr id='TextContent' style='visibility:hidden'></nobr>";
 if(id && id!='')
  document.getElementById("TextContent").innerHTML = document.getElementById(id).innerHTML;
 return document.getElementById("TextContent").offsetWidth;
}


dieses rufe ich wie folgt auf:



<head>
<script language="JavaScript" src="changetext.js" type="text/javascript"></script>
<script language="JavaScript" src="tooltip.js" type="text/javascript"></script>
<script language="JavaScript" src="java.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
<!--

window.onload = function(e)
{
 if(document.createElement)
 {
  searchChangeText();
  //tooltip.d();
 }
}

// -->
</script>
</head>


und in der tabellenspalte steht dies:


<td width="200" id="t<?echo $id;?>" title="CT" ><?echo $bemerkung;?></td>

ich hoffe ich konnte es halbwegs verstndlich erklären....Vielen Dank für eure Hilfe!!!

mfg andy

12.11.2008 14:15

2 Jörg

Hallo andy,

inwiefern muckt der IE bei dir? Bei mir wird eine Tabellenzelle mit überlangwem Inhalt wie erwartet gekürzt

12.11.2008 15:11

3 andyd

Er zeigt die css-formatierungen nicht mehr an und das kürzen macht er auch nicht....er zeigt einfach den ganzen inhalt der Spalte an...

ahh....warum auch immer macht er das kürzen jetz auf einmal

aber die css formatierung macht er nicht...wieso kann das sein?

12.11.2008 15:21 | geändert: 12.11.2008 15:25

4 Jörg

Wie sehen die betreffenden CSS-Formatierungen denn aus?

12.11.2008 15:31

5 andyd

Der IE beachtet dann wohl scheinbar den Verweis auf meine CSS Datei nicht mehr...


<link rel="stylesheet" type="text/css" href="css/style.css">

die CSS Datei sieht wie folgt aus:


html,body { background-color:#F2F2F2; }

body,

  td {
    font-family: Verdana;
    font-size: 9pt;
    color: #000000;
  }
  a:link {
    font-family: Verdana;
    font-size: 9pt;
    color: #000099;
    text-decoration: none;
  }
  a:visited {
    font-family: Verdana;
    font-size: 9pt;
    color: #000099;
    text-decoration: none;
  }
  a:hover {
    font-family: Verdana;
    font-size: 9pt;
    color: #0000ff;
    text-decoration: underline overline;
  }
  a:active {
    font-family: Verdana;
    font-size: 9pt;
    color: #000099;
    text-decoration: none;
  }

12.11.2008 15:35

6 Jörg

Auch da sehe ich keine Unterschied zwischen den Browsern. Ich würde mal die temporären Internetdateien im IE leeren.

12.11.2008 15:50

7 andyd

Hab ich bringt leider auch nix....wenn ich auf eine andere seite gehe macht er die formatierung ohne probleme nur wenn ich diese seite mit der spaltenbegrenzung aufrufe seh ich ganz kurz die formatierung und dann wieder ohne...

12.11.2008 15:53

8 Jörg

Mit dem Code, den du hier gepostet hast, kann ich das Problem leider nicht reproduzieren. Aber vielleicht funkt auch eine der beiden anderen JavaScript-Dateien dazwischen oder irgendwas anders auf der Seite.

12.11.2008 15:59

9 andyd

Der IE macht mich noch verrückt echt...

Würde es was bringen die funktion zum verkürzen irgendwie anders aufzubauen oder anders zu realisieren....

mir fällt grad auf das er den ersten teil der css datei ausführt

html,body { background-color:#F2F2F2; } 

nur den rest macht er nich

12.11.2008 16:10 | geändert: 12.11.2008 16:32

10 Jörg

Bei mir zeigt der IE auch den Hover-Effekt an.

Mit diesem HTML-Code und der von dir geposteten CSS- und Javascript-Datei kann ich keine Probleme feststellen:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<script language="JavaScript" src="changetext.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
<!--

window.onload = function(e)
{
 if(document.createElement)
 {
  searchChangeText();
  //tooltip.d();
 }
}

// -->
</script>
</head>

<body>
<table>
<tr>
<td width="200" id="t1" title="CT"><a href="#">aaaaaaaaaaa</a> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
</body>
</html>

12.11.2008 16:58 | geändert: 12.11.2008 17:00

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]