Tabelle in Div läßt sich nicht anpassen

knuffiwuffi · 16.09.2009

Hallo,

blödes Problem und finde keine Lösung:

Ich habe ein Div welches über CSS ein Hintergrundbild bekommt. In dem Div ist ein weiteres Div mit Breite, Höhe und Padding. In dem zweiten Div soll nun die Tabelle rein. Aber...die Tabelle läßt sich nur in der gesamten Breite verändern. Die Spalten bleiben bei der Vorschau in FF fix (erste Spalte sehr breit, die anderen dann ganz rechts gestaucht), trotz Angabe individueller Breiten für die Spalten.

Wenn ich in Dreamweaver die Spalten verändern möchte, dann springt er für die Spalten immer in Prozentangaben zurück und zeigt hier auch individuelle Werte an, aber in der DW Ansicht tut sich an der Spaltenbreite nichts (Rahmen verschieben sich nicht).

Hoffe ich habe das Problem verständlich erklärt. Hat jemand eine Ahnung was da nicht funzt?

In einer leeren HTML wird die Tabelle richtig angezeigt und läßt sich auch ändern, auch wenn meine Div Verschachtelung mit in die leere HTML kopiert wird:

Code der Tabelle:

HTML:

<table width="718">
  <tr>
    <td width="157" align="left" valign="top"><strong>Datum</strong></td>
    <td width="314" align="left" valign="top"><strong>Ereignis</strong></td>
    <td width="107" align="left" valign="top"><strong>Teilnahme</strong></td>
    <td width="120" align="left" valign="top"><strong>Ergebnis</strong></td>
  </tr>
  <tr>
    <td align="left" valign="top">29.08 bis 08.09.09</td>
    <td align="left" valign="top">Trainingslager Rimini</td>
    <td align="left" valign="top">Ja</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">19.10 bis 25.10.09</td>
    <td align="left" valign="top">Selektionslehrgang EC Winterberg</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">26.10 bis 01.11.09</td>
    <td align="left" valign="top">Selektionslehrgang EC Altenberg</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">02.11 bis 08.11.09</td>
    <td align="left" valign="top">Selektionslehrgang EC Königssee</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">18.11 bis 22.11.09</td>
    <td align="left" valign="top">Europa-Cup Innsbruck</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">23.11 bis 29.11.09</td>
    <td align="left" valign="top">Europa-Cup Königssee</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">30.11 bis 06.12.09</td>
    <td align="left" valign="top">Europa-Cup Winterberg</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">07.12 bis 13.12.09</td>
    <td align="left" valign="top">Europa-Cup Altenberg</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">11.01 bis 17.01.09</td>
    <td align="left" valign="top">Europa-Cup Cesana</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">18.01 bis 24.01.09</td>
    <td align="left" valign="top">Europa-Cup St. Moritz</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">01.02 bis 07.02.09</td>
    <td align="left" valign="top">Deutsche Meisterschaften Altenberg</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
  <tr>
    <td align="left" valign="top">12.02 bis 28.02.09</td>
    <td align="left" valign="top">XXI. Olympische Winterspiele Vancouver</td>
    <td align="left" valign="top">Keine Angabe</td>
    <td align="left" valign="top">Keine Angabe</td>
  </tr>
</table>

PS: Werde nun mit einem Spry Datensatz arbeiten und die tabelle vergessen...aber die Lösung würde mich trotzdem noch interessieren

...Edit: ups...da macht er genau das selbe mit den Tabellen...

domi2222 · 16.09.2009

AW: Tabelle in Div läßt sich nicht anpassen

Am besten postest du mal die komplette HTML-Datei hier. (Falls vorhanden auch die CSS-Datei(en))

An der Tabelle kanns ja eigtl. nicht liegen, da diese alleine korrekt dargestellt wird.

sokie · 16.09.2009

AW: Tabelle in Div läßt sich nicht anpassen

wenn du die Spalten in einer bestimmten Brite haben willst, geh einfach in den code, und trag es dort so ein, wie du es brauchst. Wenn du einigermassen sicher sein willst, dass die abstände wie cellpadding und cellspacing browserübergreifend gleich angezeigt werden ist es besser du legst sie konkret fest.
die vielen align="left" kannst du eigentlich herausnehmen, weil das sowieso default ist.

knuffiwuffi · 16.09.2009

Sehr wohl...Achtung, jetzt kommt Code...

HTML mit der fehlerhaften Tabelle

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"><!-- InstanceBegin template="/Templates/Vorlage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Termine</title>
<!-- InstanceEndEditable -->
<link href="Css/styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#termine {
    color: #B7EDFF;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #B7EDFF;
}
-->
</style>
<!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Bilder/Vorlage/Header_960x150b.jpg')">
<div class="MainBox">
  <div class="Header"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Header_960x150','','Bilder/Vorlage/Header_960x150b.jpg',1)"><img src="Bilder/Vorlage/Header_960x150a.jpg" alt="Start" name="Header_960x150" width="960" height="150" border="0" id="Header_960x150" /></a>
    <div class="Navigation">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html" title="Start" id="start">Start</a></li>
        <li><a href="Team.html" title="Team" class="MenuBarItemSubmenu" id="team">Team</a>
          <ul>
            <img src="Bilder/Vorlage/TeamShillouette_100x100.jpg" width="100" height="100" alt="TeamShillouette_100x100.jpg" /> <img src="Bilder/Vorlage/TeamShillouette_100x100.jpg" width="100" height="100" alt="TeamShillouette_100x100.jpg" /> <img src="Bilder/Vorlage/TeamShillouette_100x100.jpg" width="100" height="100" alt="TeamShillouette_100x100.jpg" /> <img src="Bilder/Vorlage/TeamShillouette_100x100.jpg" width="100" height="100" alt="TeamShillouette_100x100.jpg" /> <img src="Bilder/Vorlage/TeamShillouette_100x100.jpg" width="100" height="100" alt="TeamShillouette_100x100.jpg" />
          </ul>
        </li>
<li><a href="Aktuelles.html" title="Aktuelles" id="aktuelles">Aktuelles</a></li>
        <li><a href="Erfolge.html" title="Erfolge" id="erfolge">Erfolge</a>        </li>
        <li><a href="Termine.html" title="Termine" id="termine">Termine</a></li>
        <li><a href="Galerie.html" title="Galerie" id="galerie">Galerie</a></li>
        <li><a href="Sponsoren.html" title="Sponsoren" id="sponsoren">Sponsoren</a></li>
        <li><a href="Links.html" title="Links" id="links">Links</a></li>
      </ul>
    </div>
  </div>
<!-- InstanceBeginEditable name="EditRegion1" -->
  <div class="Box1Content960Termine">
    <div class="Box1Content950">
    <table width="960" id="Termine_2009_2010">
        <tr>
          <td align="left" valign="top">Datum</td>
          <td align="left" valign="top">Ereignis</td>
          <td align="left" valign="top">Teilnahme</td>
          <td align="left" valign="top">Ergebnis</td>
        </tr>
        <tr>
          <td align="left" valign="top">29.08 bis 08.09.09</td>
          <td align="left" valign="top">Trainingslager Rimini</td>
          <td align="left" valign="top">Ja</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">19.10 bis 25.10.09</td>
          <td align="left" valign="top">Selektionslehrgang EC Winterberg</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">26.10 bis 01.11.09</td>
          <td align="left" valign="top">Selektionslehrgang EC Altenberg</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">02.11 bis 08.11.09</td>
          <td align="left" valign="top">Selektionslehrgang EC Königssee</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">18.11 bis 22.11.09</td>
          <td align="left" valign="top">Europa-Cup Innsbruck</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">23.11 bis 29.11.09</td>
          <td align="left" valign="top">Europa-Cup Königssee</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">30.11 bis 06.12.09</td>
          <td align="left" valign="top">Europa-Cup Winterberg</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">07.12 bis 13.12.09</td>
          <td align="left" valign="top">Europa-Cup Altenberg</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">11.01 bis 17.01.09</td>
          <td align="left" valign="top">Europa-Cup Cesana</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">18.01 bis 24.01.09</td>
          <td align="left" valign="top">Europa-Cup St. Moritz</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">01.02 bis 07.02.09</td>
          <td align="left" valign="top">Deutsche Meisterschaften Altenberg</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
        <tr>
          <td align="left" valign="top">12.02 bis 28.02.09</td>
          <td align="left" valign="top">XXI. Olympische Winterspiele Vancouver</td>
          <td align="left" valign="top">Keine Angabe</td>
          <td align="left" valign="top">Keine Angabe</td>
        </tr>
      </table>
    </div></div>
<div class="Footer">
</div>
<!-- InstanceEndEditable -->
<div class="FooterContent960"><img src="Bilder/Vorlage/SpeedclinicLogo.jpg" width="131" height="25" alt="SpeedclinicLogo.jpg" /></div>
<div class="FooterContent960"><a href="Impressum.html" id="impressum">Impressum</a> I <a href="Kontakt.html" id="kontakt">Kontakt</a></div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>

CSS (td bekommt später ein TRANSPARENT)

Code:

@charset "utf-8";
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #1C181D;
    color: #FFF;
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url(../Bilder/Vorlage/snow_1024x768.png);
    background-repeat: no-repeat;
}
h1 {
    font-size: 16px;
    color: #B7EDFF;
    display: inline;
}
h2 {
    font-size: 16px;
    color: #1D181E;
    display: inline;
}
td {
    background-color: #333;
    color: #FFF;
}
a:link {
    color: #666;
}
a:visited {
    color: #666;
}
a:hover {
    color: #B7EDFF;
}
a:active {
    color: #B7EDFF;
}
a img {
    border : 0 none;
}
.MainBox {
    width: 960px;
    margin: auto;
    z-index: 1;
}
.Header {
    height: 150px;
    width: 960px;
    background-color: #1C181D;
}
.Navigation {


}

.Box1 {
    height: 580px;
    width: 960px;
    color: #000;
    margin-top: 50px;
    background-color: #FFF;
    margin-bottom: 50px;
}

.Box1Content950 {
    width: 950px;
    height: 580px;
    padding: 5px;
    color: #000;
}
.Box1Content960Termine {
    height: 580px;
    width: 960px;
    margin-top: 50px;
    margin-bottom: 50px;
    background-image: url(../Bilder/Termine/termine_960x580.jpg);
}

.Box1Slideshow {
    height: 580px;
    width: 960px;
    color: #FFF;
    margin-top: 50px;
    background-color: #1C181D;
    margin-bottom: 50px;
}


.Box2 {
    height: 150px;
    width: 320px;
}
.Box2Content290 {
    width: 310px;
    height: 150px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    margin-left: 0px;
    padding-top: 10px;
}

.Box3 {
    height: 150px;
    width: 320px;
    float: right;
}
.Box3Content290 {
    width: 310px;
    height: 150px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    margin: auto;
    padding-top: 10px;
}
.Box4 {
    height: 150px;
    width: 320px;
    float: right;
    clear: both;
}
.Box4Content290 {
    width: 310px;
    height: 150px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    margin-left: 10px;
    padding-top: 10px;
}
.Footer {
    height: auto;
    width: 960px;
}
.FooterContent960 {
    width: 960px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFF;
    margin-bottom: 20px;
    padding-top: 10px;
}

@ Sokie

Genau das ist mein Problem...feste Spaltenbreiten werden ignoriert, zumindest in meiner HTML...in einer leeren HTML klappt es

Links/Oben richte ich immer ein um die Tabelle anschaulicher zu haben (Vorschau)...aber hast recht

sokie · 16.09.2009

AW: Tabelle in Div läßt sich nicht anpassen

Code:

[COLOR=Black]body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #1C181D;
    color: #FFF;
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url(../Bilder/Vorlage/snow_1024x768.png);
    background-repeat: no-repeat;
}[/COLOR]

dass du da für jede Tabellezelle das selbe Hintergrundbild setzt und vor allem die breite erstmal auf 100% ist dir klar, oder ? Mir erschliesst sich der Sinn nicht wirklich.

natürlich kann man das align="left" für jede Zelle setzen, ist eben nur eine Menge code.

knuffiwuffi · 16.09.2009

AW: Tabelle in Div läßt sich nicht anpassen

Ahhhhhhh...da liegt der Hund begraben...klar...habe ich ja im BODY festgelegt...jetzt habe ich einen Ansatz...vielen Dank...10 Sterne für Dich

100% damit die DIVs mit dem Browser Rand abschließen

Vielen, vielen Dank...ich hätte sicher noch 2 Tage danach gesucht...aber für die nächsten Projekte wird die Suche nun schneller gehen...immer schauen was drüber definiert ist...

eytibi · 16.09.2009

AW: Tabelle in Div läßt sich nicht anpassen

Hallo,

auch wenn du schon die Lösung hast ein kleiner Tipp von mir:

Da du auch den Firefox benutzt empfehle ich dir das Addon Firebug. Dort kannst du auf ein HTML-Element klicken und Firebug zeigt dir die komplette CSS-Definition an. So siehst du auch, wo bestimmte Eigenschaften (wie hier das width: 100%

definiert sind. Diese Eigenschaften kannst du dann in Firebug direkt bearbeiten / löschen / ergänzen und dir die Auswirkungen anschauen, bevor du sie in deinem Code einfügst.

Firebug hat mir bestimmt schon einigetage an Fehlersuche erspart.