Tabelle Spaltenbreite steigt trotz es auf einen festen Wert

Für die Ausgabe Einstellung pls sieht den Screenshot:Tabelle Spaltenbreite steigt trotz es auf einen festen Wert

enter image description here

Der obige Code wird von dem HTML-Code generiert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title>SYM</title> 
    <style type="text/css" media="all"> 
     @import "test.css"; 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div class="round-box"> 
     <table class="round-box-layout"> 
     <thead><tr><td></td><td></td><td></td></tr></thead> 
     <tbody><tr><td></td><td> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
      culpa qui officia deserunt mollit anim id est laborum. 
     </td><td></td></tr></tbody> 
     <tfoot><tr><td></td><td></td><td></td></tr></tfoot> 
     </table> 
    </div> 
    <div class="round-box2"> 
     <table class="round-box-layout"> 
     <thead><tr><td></td><td></td><td></td></tr></thead> 
     <tbody><tr><td></td><td> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
      culpa qui officia deserunt mollit anim id est laborum. 
     </td><td></td></tr></tbody> 
     <tfoot><tr><td></td><td></td><td></td></tr></tfoot> 
     </table> 
    </div> 
<body> 
</html>

Die test.css ist

.round-box { 
    width: 250px; 
} 

table.round-box-layout { 
    border-collapse: collapse; 
    width: 100%; 

} 

table.round-box-layout, 
.round-box-layout tr, 
.round-box-layout td { 
    padding: 0; 
    margin: 0; 
    border: solid; 
} 

table.round-box-layout tbody td:first-child { 
    background: url(img/borders/l-e.png) repeat-y 0 0; 
    height: 36px; 
    width: 33px; 
} 

table.round-box-layout tbody td:last-child { 
    background: url(img/borders/r-e.png) repeat-y 0 0; 
    height: 36px; 
    width: 33px; 
} 

table.round-box-layout thead td { 
    background: url(img/borders/t-e.png) repeat-x 0 0; 
    height: 36px; 
    width: 33px; 
} 

table.round-box-layout thead td:first-child { 
    background: url(img/borders/tl-c.png) no-repeat 0 0; 
} 

table.round-box-layout thead td:last-child { 
    background: url(img/borders/tr-c.png) no-repeat 0 0; 
} 

table.round-box-layout tfoot td { 
    background: url(img/borders/b-e.png) repeat-x 0 0; 
    height: 36px; 
    width: 33px; 
} 

table.round-box-layout tfoot td:first-child { 
    background: url(img/borders/bl-c.png) no-repeat 0 0; 
} 

table.round-box-layout tfoot td:last-child { 
    background: url(img/borders/br-c.png) no-repeat 0 0; 
} 

.round-box2 { 
    width: 800px; 
}

Das Problem ist die erste und die letzte (dritte) columns' Breiten verändert bekommen. Diese Breite scheint von der Breite des Container-Divs und dem Textinhalt abhängig zu sein. Bitte geben Sie an, wie Sie das beheben können. Ich benutze Firefox 3.

Quelle

2009-06-28 Anonymous

-1

Sie könnten COLGROUPS und COLS in Betracht ziehen, um dies zu akzeptieren?

<table> 
    <colgroup> 
    <col width="36" /> 
    <col /> 
    <col width="36" /> 
    </colgroup> 
    <tbody> 
    <td>&nbsp;</td> 
    <td>Content</td> 
    <td>&nbsp;</td> 
    </tbody> 
</table>

Ihre andere Inhalte können in Ordnung sein über CSS zu tun, aber es scheint zu komplex die Methode, die Sie für die genommen haben, was Sie erreichen wollen. Es mag einen Grund dafür geben, von dem ich natürlich nichts weiß, aber da ich erfahren habe, wie ich das Kind und das Elternteil in dieser Technik benutze, kann ich dazu nicht viel mehr sagen. Allerdings kann ich hinzufügen, dass manchmal ein (nicht-brechendes Leerzeichen) zu den leeren Tabellenzellen hinzugefügt wird, damit die Dinge ein wenig mehr wie erwartet reagieren.

Wenn das obige aus irgendeinem Grund zu HTML-y für Sie war, könnten Sie einige Klassen erstellen, die auf die TDs angewendet werden, und dann die Breite auf sie anwenden.

<td class="left-content-bar">&nbsp;</td> 

.left-content-bar 
{ 
    width: 36px; 
}

Quelle

2009-06-28 10:52:07 Amadiere

Der Standard table-layout Modell auto ist, die Höhe und Breite als Vorschläge nimmt. Die Umstellung auf das Modell fixed sollte dies beheben.

Das heißt, es sieht so aus, als ob Sie Tische für Layout missbrauchen (um abgerundete Ecken zu erreichen). Es gibt better ways to get rounded corners.

Quelle

2009-06-28 11:06:22 Quentin

Tabelle Spaltenbreite steigt trotz es auf einen festen Wert

Antwort

Verwandte Themen