Laden...

Probleme mit TableCell Width

Erstellt von w00dy vor 13 Jahren Letzter Beitrag vor 13 Jahren 2.095 Views
W
w00dy Themenstarter:in
14 Beiträge seit 2007
vor 13 Jahren
Probleme mit TableCell Width

Hallo zusammen,

ich baue gerade eine art Systemmonitor auf dem ich auswerte und Anzeige wie lange ein Job innerhalb der letzten 31 Tage im durchschnitt gelaufen ist.

Nun folgendes Problem:

Ich habe eine Tabellen angelegt:


<asp:Table ID="tblContent" CellSpacing="0" Width="2040px" runat="server"></asp:Table>

Die Zahl 2040px ergibt sich aus 1440 * 1px Felder -> repräsentieren die Minuten
und 600px für die Bezeichung des Jobs
600+1440 = 2040px

So nun lege ich innerhalb der Tabelle eine neue Zeile an und füge die erste Zelle hinzu:


TableRow rowY = new TableRow();  //Neue Zeile
                    TableRow emptyRow = new TableRow();
                    TableCell jobCell = new TableCell();

                    jobCell.Height = Unit.Pixel(15);
                    jobCell.Width = Unit.Pixel(400);

                    jobCell.Text = "jobname";

                    rowY.Cells.Add(jobCell);

danach werden die 1px großen Zellen hinzugefügt:



                    for (int ig = 1; ig <= 1440; ig++)
                    {
                        TableCell cellX = new TableCell();
                        cellX.Height = Unit.Pixel(15);
                        cellX.Width = Unit.Pixel(1);

                            rowY.Cells.Add(cellX);
                        }
                    }

nun ist das Problem das die erste Zelle im Browser nicht mit der festen Breite 400px dargestellt wird sondern sich immer am längsten vorkommenden Jobnamen ausrichtet.

das hinzufügen von

<asp:Table ID="tblContent" style="table-layout:auto" CellSpacing="0" Width="2050px" runat="server"></asp:Table>

hat nur bewirkt das auf einmal alle zellen 1px groß sind...

ich hab einfach keine Ahnung an was das liegen könnte... hat jemand eine idee?
Falls noch nicht ganz klar ist was ich meine bzw. bezwecken möchte könnt ihr mich gerne fragen 😃.

Viele Grüße und danke,
w00dy

P
67 Beiträge seit 2007
vor 13 Jahren

Hi w00dy,

also du willst links in der Tabelle Jobnamen haben und rechts dann Balkendiagramme die dann anhand der Minuten die entsprechenden Größen haben?

Also in etwa so?

Hallo |||||||||||||
Test ||||||||
Blub |||||||||||

Die Striche sind dann immer deine 1px Zellen.

Wenn ich das so richtig verstanden habe solltest du vielleicht einen anderen Ansatz verwenden.

Erst mal zu der Frage warum der Browser die Zelle nicht mit 400px sondern am längsten Namen ausrichtet. Der Browser stellt die Tabelle immer so dar, dass alle Zellen einer Spalte die gleiche Breite besitzen. Das kann man umgehen indem man ihm sagt, dass er mehrere Zellen in einer Spalte schieben soll (Stichpunkt colspan bei td). Wenn du die Balken dahinter direkt nach dem Ende des Namen haben willst sind Tabellen nicht ganz so gut geeignet. Nimm dafür einfach Divs die untereinander stehen, die sind dann unabhängig von den Divs drüber und drunter.

Für das Darstellen der Balken würde ich keine 1px Zellen verwenden, da diese je nachdem wieviele du verwendest sich unterschiedlich ausrichten können. Eine Tabelle in HTML ist immer so gestrickt das die Anzahl der Zellen in einer Zeile gleich groß und eine Spalte immer die gleiche Breite für alle Zellen nimmt. Dafür würde ich auch hier ein anderes HTML Element nehmen das du dann je nachdem wie groß der Balken ist per Programmierung die Breite festlegst.

Gruß Phoenix

W
w00dy Themenstarter:in
14 Beiträge seit 2007
vor 13 Jahren

Hey Phönix,

danke für die schnelle Antwort.

Du hast recht damit das mein Ergebnis am Ende so aussehen soll:

Hallo |||||||||||||
Test ||||||||
Blub |||||||||||

Für das Darstellen der Balken würde ich keine 1px Zellen verwenden, da diese je nachdem wieviele du verwendest sich unterschiedlich ausrichten können. Eine Tabelle in HTML ist immer so gestrickt das die Anzahl der Zellen in einer Zeile gleich groß und eine Spalte immer die gleiche Breite für alle Zellen nimmt. Dafür würde ich auch hier ein anderes HTML Element nehmen das du dann je nachdem wie groß der Balken ist per Programmierung die Breite festlegst.

das habe ich wohl nicht ausreichend erklärt.

in jeder Zeile sind ja grundsätzlich die gleiche Anzahl an Zellen gegeben (1440).

Jetzt bekomme ich eine startzeit und eine laufzeit geliefert. Die Startzeit wandel ich anhand einer Formel in einen "Minutenwert" um. Eine Endzeit ereiche ich durch addition der startzeit mit der laufzeit. Auch hier wird wieder in den Minutenwert umgewandelt.

Dann durchlaufe ich in einer schleife alle 1440 Zellen.

Wenn dann eine Zelle innerhalb des Startwertes und Endwertes liegt wird diese eingefärbt, wenn nicht wird sie so gelassen und zur nächsten Zelle gesprungen.

Von daher sollte das von dir oben angesprochene Problem nichtig sein.

mir fällt aber kein anderer Ansatz ein...hmm

3.170 Beiträge seit 2006
vor 13 Jahren

Hallo,

ein anderer Ansatz wäre eine zweispaltige Tabelle.
In die erste Spalte kommt wie gehabt der Name, die zweite Zelle enthält ein einzelnes DIV, dem Du die entrechende Weite per style setzt, und dieses DIV dann einfärbst.
Das ist dann auch ein viel kleineres Dokument und der Browser verschluckt sich nicht beim Rendern von _unglaublich _ vielen Tabellenzellen.
Wenn Du willst daß der Browser immer die Zellenbreiten genau so rendert wie angegeben solltest Du Dir mal den Style table-layout:fixed und/oder das colgroup-Element ansehen.

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

W
w00dy Themenstarter:in
14 Beiträge seit 2007
vor 13 Jahren

Hallo,

ein anderer Ansatz wäre eine zweispaltige Tabelle.
In die erste Spalte kommt wie gehabt der Name, die zweite Zelle enthält ein einzelnes DIV, dem Du die entrechende Weite per style setzt, und dieses DIV dann einfärbst.

Hallo MarsStein,

danke für deine Antwort...

aber den Tipp verstehe ich nicht ganz. damit wäre ja nur eine zusammenhängende einfäbrung möglich...aber es könenn ja mehrer an verschiedenen stellen existieren

z.B.:

Test1 |||| |||||||| |||
Test2 ||||||| ||||| |||||

da ist mir nicht ganz klar wie das funktiionieren soll?

das mit table-layout:fixed habe ich schon probiert... da setzt er allerdings einfach alle zellen auf 1px auch die seperat als 400px groß gekennzeichnete...

irgendwie ist da der wurm drinne... 😦

3.170 Beiträge seit 2006
vor 13 Jahren

Hallo,

da ja jede Minute durch 1px dargestellt wir, kannst Du auch genausogut einzelne DIVs mit absoluter Positionierung (position:absolute) erstellen. Jedes DIV muss dann so lang werden, wie die Anzahl zusammenhängender Minuten, und eán einer Position stehen, die der Startminute der jeweiligen Sequenz entspricht.
Entweder innerhalb der Tabellenzellen (dann müssen diese mit position:relative versehen werden, damit der Bezug stimmt) oder direkt in der Seite oder in einem anderen relatibv oder absolut positionierten DIV.

Das ist allemal viel besser als so eine Monstertabelle, da brechen sich die Browser einen dran ab beim rendern.

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

W
w00dy Themenstarter:in
14 Beiträge seit 2007
vor 13 Jahren

hoi MarsStein,

meinst du das so etwa in diese Richtung?

<html>
<head></head>
<body>

<table style="width:2040x;">
		<tr>
            <td width="600px">
                Test123xxxxxxxxxxxxxxx</td>
            <td width="1440px">
                <div style="display:inline; position:absolute; margin-left:35px; width:10px; background-color:#003366 ">a</div><div style="display:inline; position:fixed; margin-left:48px; width:10px; background-color:#003366 ">b</div>
            </td>
        </tr>
    </table>

</body>
</html>

aber irgendwie funktioniet das nicht...die einzelnen divs verändern sich gegenseitig...bzw. auch die in der neuen zeile veränder die oberen.

ich wäre für jede weiter hilfe sehr dankbar.

viele grüße.

3.170 Beiträge seit 2006
vor 13 Jahren

Hallo,

so ähnlich hatte ich es gemeint. Aber das position:fixed hat da nix verloren... und statt margin-left solltest Du einfach left nehmen.
Ich hab Dein Beispiel mal versucht anzupassen, allerdings sind sich auch die Browser mal wieder nicht einig, z.B. wie eine TD zu rendern ist, wenn sie position:relative bekommt (was ich auch oben geschrieben hatte, Du aber ausser Acht gelassen hast). Man müsste also auf jeden Fall noch ein DIV in die TD schachteln, das dann erst die anderen DIVs enthält.
Könnte auch am fehlenden Doctype und dtd liegen, das hab ich nicht mehr ausprobiert...

Aber ich würde Dir ohnehin raten, alles mit absoluter Positionierung zu machen. Dann vermeidet man sämtliche Probleme mit Tabellendarstellungen in Browsern, und es wird immer gerendert wie Du es haben willst - und für Deinen Zweck muss es ja alles auf Pixel genau sein.

Hier mal ein Beispiel:

<html>
<head></head>
<body>
<div style="position:relative">
  <!-- erste Zeile mit top:0px -->
  <div style="position:absolute;top:0px;border:1px solid blue">
    <!-- erste "Zelle" für die Beschriftung -->
    <div style="position:absolute;width:600px;height:15px;">Beschriftung 1</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte mit left:600+Startzeit und width:Endzeit-Startzeit -->
    <div style="position:absolute;left:600px;width:80px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:690px;width:25px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:755px;width:5px;height:15px;background-color:black;"></div>
  </div>

  <!-- weitere Zeilen mit der top-Angabe Zeilenzahl*Zeilenhöhe (hier 15px+2px für Abstand) -->
  <div style="position:absolute;top:17px;border:1px solid blue">
    <!-- erste "Zelle" für die Beschriftung -->
    <div style="position:absolute;width:600px;height:15px;">Beschriftung 2</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte -->
    <div style="position:absolute;left:630px;width:45px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:730px;width:10px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:740px;width:35px;height:15px;background-color:black;"></div>
  </div>

  <div style="position:absolute;top:34px;border:1px solid blue">
    <!-- erste "Zelle" für die Beschriftung -->
    <div style="position:absolute;width:600px;height:15px;">Beschriftung 3</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte -->
    <div style="position:absolute;left:610px;width:55px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:680px;width:40px;height:15px;background-color:black;"></div>
    <div style="position:absolute;left:730px;width:110px;height:15px;background-color:black;"></div>
  </div>
</div>
</body>
</html>

wenn Du dann vernünftige CSS-Klassen erstellst und den DIVs zuweist, brauchst Du Dich nur noch um die eigentliche Position zu kümmern:

<html>
<head>
  <style type="text/css">
    div.row
    {
      position:absolute;
    }
    div.label
    {
      position:absolute;
      width:600px;
      height:15px;
    }
    div.timespan
    {
      position:absolute;
      height:15px;
      background-color:black;
    }
  </style>
</head>
<body>
<div style="position:relative">
  <!-- erste Zeile mit top:0px -->
  <div class="row" style="top:0px">
    <!-- erste "Zelle" für die Beschriftung -->
    <div class="label">Beschriftung 1</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte mit left:600+Startzeit und width:Endzeit-Startzeit -->
    <div class="timespan" style="left:600px;width:80px"></div>
    <div class="timespan" style="left:690px;width:25px"></div>
    <div class="timespan" style="left:755px;width:5px"></div>
  </div>

  <!-- weitere Zeilen mit der top-Angabe Zeilenzahl*Zeilenhöhe (hier 15px+2px für Abstand) -->
  <div class="row" style="top:17px">
    <!-- erste "Zelle" für die Beschriftung -->
    <div class="label" style="width:600px;">Beschriftung 2</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte -->
    <div class="timespan" style="left:630px;width:45px"></div>
    <div class="timespan" style="left:730px;width:10px"></div>
    <div class="timespan" style="left:740px;width:35px"></div>
  </div>

  <div class="row" style="top:34px">
    <!-- erste "Zelle" für die Beschriftung -->
    <div class="label" style="width:600px;">Beschriftung 3</div>
    <!-- die DIVs für die einzufärbenden Zeitabschnitte -->
    <div class="timespan" style="left:610px;width:55px"></div>
    <div class="timespan" style="left:680px;width:40px"></div>
    <div class="timespan" style="left:730px;width:110px"></div>
  </div>
</div>
</body>
</html>

Gruß, MarsStein

Non quia difficilia sunt, non audemus, sed quia non audemus, difficilia sunt! - Seneca

87 Beiträge seit 2006
vor 13 Jahren
Diagramme

Ich würde einen weiteren Ansatz in Betracht ziehen.

Ein richtiges Diagramm. Etwas was MS für .NET nach geliefert hat. 😁

http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

Und da Bilder mehr sagen als Tausend Worte noch ein Bildchen im Anhang (weitere gibs auch auf der Seite).

Das ganze funzt auch im VS2010. D.h. installiert hab die Control-Erweiterung nicht, aber nützt eh nur dem Desinger, und denn mag ich eh nich 8)

MfG

Tilton

"In der Informatik geht es genauso wenig um Computer wie in der Astonomie um Teleskope."
Edsger W. Dijkstra

The Humble Programmer by Edsger W. Dijkstra