Quov: Mehrere Tabellen nach größter TD ausrichten

SELF-Forum

Mehrere Tabellen nach größter TD ausrichten

Quov
– Informationen zu den Bewertungsregeln

Hallo!
Schwierig, eine passende berschrift zu finden ;o

Folgendes Problem:

Ich habe ein html Dokument in welchem mehrere Tabellen zum Einsatz kommen.
Nun ist der Inhalt der Tabellen unterschiedlich, dennoch sollen die Tabellen allesamt gleich breit sein - und zwar ohne, dass ich ihnen eine feste Breite zuweise - der Inhalt soll die Breite bestimmen.
Hat da jemand eine Idee für mich?

Anbei mein bisheriger Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Normfall Systemdiagnose</title>  
<style type="text/css">  
  
div#header h1{  
  
color:white;  
  
}  
  
div#user{  
  
  
  background-color:red;  
  border:1px solid green;  
  margin:3px 5px 3px 5px;  
  padding: 5px 10px 5px 10px;  
}  
div#content{}  
div#content table {  
  
border-collapse:collapse;  
border:1px solid purple;  
  
  
}  
div#content td{  
  
border:1px solid #000;  
vertical-align:top;  
  
  
}  
  
div#content th{  
  
border:1px solid #000;  
vertical-align:top;  
  
  
}  
</style>  
  
  
  
</head>  
<body>  
  
<div id="user">  
     <div id="header">  
     <h1>Office</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th><th>Install Location</th></tr>  
      <tr><td>Microsoft Office Professional Plus 210</td><td>14.0.1.8094.1</td><td>German</td><td>C:\Program Files\Microsoft Office\Office\Office14\</td></tr>  
      <tr><td>Microsoft Office Professional Plus 210</td><td>14.0.1.8094.1</td><td>German</td><td>C:\Microsoft Office\Office\Office14\</td></tr>  
      <tr><td>Microsoft Office </td><td>14.0.1.8094.1</td><td>German</td><td>C:\Program Files\\</td></tr>  
      </table>  
       </div>  
       <div id="header">  
     <h1>Adobe</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th><th>Install Location</th></tr>  
      <tr><td>Adobe Reader 9.4.0 - Deutsch</td><td>9.4.0</td><td>Deusch</td><td>C:\Program Files\Adobe\</td></tr>  
      </table>  
       </div>  
       <div id="header">  
     <h1>Normfall</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th></tr>  
      <tr><td>Normfall Manager</td><td>5.0.6.00.1</td><td>Deusch</td></tr>  
      <tr><td>Normfall PDF Editor</td><td>4.0.1</td><td>Deusch</td></tr>  
      </table>  
       </div>  
  
  
</div>  
<div id="user">  
     <div id="header">  
     <h1>Office</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th><th>Install Location</th></tr>  
      <tr><td>Microsoft Office Professional Plus 210</td><td>14.0.1.8094.1</td><td>German</td><td>C:\Program Files\Microsoft Office\Office\Office14\</td></tr>  
      <tr><td>Microsoft Office Professional Plus 210</td><td>14.0.1.8094.1</td><td>German</td><td>C:\Microsoft Office\Office\Office14\</td></tr>  
      <tr><td>Microsoft Office </td><td>14.0.1.8094.1</td><td>German</td><td>C:\Program Files\\</td></tr>  
      </table>  
       </div>  
       <div id="header">  
     <h1>Adobe</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th><th>Install Location</th></tr>  
      <tr><td>Adobe Reader 9.4.0 - Deutsch</td><td>9.4.0</td><td>Deusch</td><td>C:\Program Files\Adobe\</td></tr>  
      </table>  
       </div>  
       <div id="header">  
     <h1>Normfall</h1>  
     </div>  
     <div id="content">  
      <table cellpadding="10" >  
      <tr><th>Name</th><th>Version</th><th>Language</th></tr>  
      <tr><td>Normfall Manager</td><td>5.0.6.00.1</td><td>Deusch</td></tr>  
      <tr><td>Normfall PDF Editor</td><td>4.0.1</td><td>Deusch</td></tr>  
      </table>  
       </div>  
</div>  
</body>  
</html>

Grüße

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Mehrere Tabellen nach größter TD ausrichten

    MudGuard Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    Hi,

    Schwierig, eine passende berschrift zu finden ;o

    Folgendes Problem:

    Ich habe ein html Dokument in welchem mehrere Tabellen zum Einsatz kommen.
    Nun ist der Inhalt der Tabellen unterschiedlich, dennoch sollen die Tabellen allesamt gleich breit sein - und zwar ohne, dass ich ihnen eine feste Breite zuweise - der Inhalt soll die Breite bestimmen.
    Hat da jemand eine Idee für mich?

    Anbei mein bisheriger Code:

    der einige Fehler aufweist.

    <div id="header">
         <div id="content">

    ...

    <div id="header">

    ...

    <div id="content">

    id-Attributwerte müssen eindeutig sein, Du verwendest mehrere id-Werte mehrfacht.
    class-Attributwerte dürfen mehrfach vorkommen.

    <div id="header">
         <h1>Normfall</h1>
         </div>

    Warum verpackst Du die h1 in ein div?
    Was bringt das?

    <div id="content">
          <table cellpadding="10" >
          </table>
           </div>

    Warum verpackst Du die Tabelle in ein div?

    Für mich sieht das von der Logik her nach einer Tabelle aus.
    Evtl. mit mehreren tbody-Elementen (einen pro Hersteller), die Herstellernamen dann in th-Elementen mit Colspan.

    Wenn das ganze als eine Tabelle aufgebaut wird, hast Du Dein Problem gleich mit erledigt.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Mehrere Tabellen nach größter TD ausrichten

      Quov
      – Informationen zu den Bewertungsregeln

      Hab ich dich richtig verstanden?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Normfall Systemdiagnose</title>  
<style type="text/css">  
  
table.header {  
  
  margin:5px 10px 5px 10px;  
  
 }  
  
th.header {  
  
text-align:left;  
  
}  
td.header {  
  
  
border:1px dashed red;  
  
}  
  
  
table.content {  
  
border-collapse:collapse;  
border:1px solid purple;  
  
}  
  
td.content {  
  
border: 1px solid #000;  
vertical-align:top;  
  
  
}  
th.content {  
border: 1px solid #000;  
vertical-align:top;  
  
  
}  
  
  
  
</style>  
  
  
  
</head>  
<body>  
<table class="header" cellspacing="20">  
         <tr><th class="header"> Office</th> </tr>  
         <td class="header">  
                 <table class="content" cellpadding="10">  
                 <tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th><th class="content">Install Location</th></tr>  
                 <tr><td class="content">Microsoft Office Professional Plus 2010</td><td class="content">14.0.1.8456.0.1</td><td class="content">German</td><td class="content">C:\Program Files\Microsoft\Office\Office14</td></tr>  
                 <tr><td class="content">Microsoft Office Professional Plus 2010</td><td class="content">14.0.1.8456.0.1</td><td class="content">German</td><td class="content">C:\Program Files\Microsoft\Office\Office14</td></tr>  
                 </table>  
         </td>  
         <tr><th class="header">Adobe</th></tr>  
         <td class="header">  
                 <table class="content" cellpadding="10">  
                 <tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th><th class="content">Install Location</th></tr>  
                 <tr><td class="content">Adobe Reader 9.4.0 - Deutsch</td><td class="content">9.4.0</td><td class="content">Deutsch</td><td class="content">C:\Program Files\Adobe\9.0\Reader</td></tr>  
                 </table>  
         </td>  
         <tr><th class="header">Normfall</th></tr>  
         <td class="header">  
                <table class="content" cellpadding="10">  
                <tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th></tr>  
                <tr><td class="content">Normfall Manager</td><td class="content">5.0.6.00.1</td><td class="content">Deusch</td></tr>  
                <tr><td class="content">Normfall PDF Editor</td><td class="content">4.0.1</td><td class="content">Deusch</td></tr>  
                </table>  
        </td>  
</table>  
</body>  
</html>

      Wie man sieht, steh ich nun vor zwei Problemen:

      Mit Cellspacing hab ich vom th.header zum td.header einen Abstand, der nicht exisiteren soll(Zumindest nicht in der selben Größe wie der Abstand von thtd zu thtd) - und ich weiß nicht, wie ich den th/td.content beibringen kann, auf die komplette Größe zu maximieren außer mit width:100% was nur den ersten Eintrag vergrößert.
      Grüße und Danke für die Hinweise :))

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Mehrere Tabellen nach größter TD ausrichten

        Jeremy
        – Informationen zu den Bewertungsregeln

        Hallo!

        Hab ich dich richtig verstanden?

        Nein. Dir sei folgender Artikel an's Herz gelegt: http://de.selfhtml.org/html/tabellen/aufbau.htm@title=Tabellen@@self

        Liebe Grüße aus Norddeutschland.

        --
        ie:{ fl:( br:> va:} ls:[ fo:| rl:? n4:~ ss:) de:> js:| ch:? sh:( mo:) zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Mehrere Tabellen nach größter TD ausrichten

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Wie wäre es mit mehreren getrennten Tabellen mit je einem caption-Element?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. Mehrere Tabellen nach größter TD ausrichten

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Hab ich dich richtig verstanden?

        Nein, ich habe NICHTS von vielen verschachtelten Tabellen geschrieben, sondern von EINER Tabelle, mit mehreren tbody-Elementen.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Mehrere Tabellen nach größter TD ausrichten

          Quov
          – Informationen zu den Bewertungsregeln

          Jetztige Version:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Normfall Systemdiagnose</title>  
<style type="text/css">  
  
 table.content {  
 width:100%;  
 border:1px solid #000;  
 border-collapse:collapse;  
 }  
 tbody.content  
 {  
margin-top:500px;  
  
 }  
  
 th.content {  
 border:1px solid #000;  
  
  
 }  
  td.content {  
 border:1px solid #000;  
  
  
 }  
  th.office {  
  
 border:1px solid #000;  
 width:50px;  
  
 }  
 td.office {  
  
 border:1px solid #000;  
 width:50px;  
  
 }  
</style>  
  
  
  
  
</head>  
<body>  
  
<table class="content" cellpadding="10">  
<tbody>  
<tr><th>Office</th></tr>  
</tbody>  
<tbody>  
<tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th><th class="content">Install Location</th><th class="office">Access</th><th class="office">Excel</th><th class="office">Outlook</th><th class="office">Word</th></tr>  
<tr><td class="content">Microsoft Office Professional Plus 2010</td><td class="content">14.0.1.8456.0.1</td><td class="content">German</td><td class="content">C:\Program Files\Microsoft\Office\Office14</td><td class="office"></td><td class="office"></td><td class="office"></td><td class="office"></td></tr>  
<tr><td class="content">Microsoft Office Professional Plus 2010</td><td class="content">14.0.1.8456.0.1</td><td class="content">German</td><td class="content">C:\Program Files\Microsoft\Office\Office14</td><td class="office"></td><td class="office"></td><td class="office"></td><td class="office"></td></tr>  
</tbody>  
<tbody>  
<tr><th>Adobe</th></tr>  
</tbody>  
<tbody>  
<tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th><th class="content">Install Location</th></tr>  
<tr><td class="content">Adobe Reader 9.4.0 - Deutsch</td><td class="content">9.4.0</td><td class="content">Deutsch</td><td class="content">C:\Program Files\Adobe\9.0\Reader</td></tr>  
</tbody>  
<tbody>  
<tr><th>Normfall</th></tr>  
</tbody>  
<tbody>  
<tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th></tr>  
<tr><td class="content">Normfall Manager</td><td class="content">5.0.6.00.1</td><td class="content">Deusch</td></tr>  
<tr><td class="content">Normfall PDF Editor</td><td class="content">4.0.1</td><td class="content">Deusch</td></tr>  
</tbody>  
</table>  
</body>  
</html>

          Manchmal muss man mit einem Revolver am Kopf auf Informationen gestoßen werden, bis man sie erkennt :)

          Danke für die Hilfe(n)

          Grüße

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Mehrere Tabellen nach größter TD ausrichten

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Quov:

            nuqneH

            Manchmal muss man mit einem Revolver am Kopf auf Informationen gestoßen werden, bis man sie erkennt :)

            Ja. Du hast die Erkenntnis aber noch vor dir.

            MudGuard sagte: „mit mehreren tbody-Elementen (einen pro Hersteller)“

            Und was machst du?

            <table class="content" cellpadding="10">
            <tbody>
            <tr><th>Office</th></tr>
            </tbody>
            <tbody>
            <tr><th class="content">Name</th><th class="content">Version</th><th class="content">Language</th><th class="content">Install Location</th><th class="office">Access</th><th class="office">Excel</th><th class="office">Outlook</th><th class="office">Word</th></tr>

            Wozu braucht die Tabelle @class="content"? @cellpadding="10" nimmst du bitte aus dem Markup raus und tätigst _alle_ Darstellungsangaben per CSS.

            Bei <th>Office</th> (und den anderen Überschriften) dürfte sich http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm@title=@colspan anbieten.

            Und kein getrennter 'tbody' für die Überschrift.

            @class="content" ist völlig überflüssig. Auch für die Breitenangabe der Spalten mit @class="office" gäbe es andere Möglichkeiten, z.B. <http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren@title=Spalten vordefinieren>.

            <table>  
  <tbody>  
    <tr><th colspan="8">Office</th></tr>  
    <tr>  
      <th>Name</th>  
      <th>Version</th>  
      <th>Language</th>  
      <th>Install Location</th>  
      <th class="office">Access</th>  
      <th class="office">Excel</th>  
      <th class="office">Outlook</th>  
      <th class="office">Word</th>  
    </tr>  
    ⋮  
  </tbody>  
  <tbody>  
    <tr><th>Adobe</th></tr>  
    <tr>  
      <th>Name</th>  
      ⋮

            Und warum ist der Inhalt mal deutsch, mal englisch?

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln