• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

border-rounded bei Tabelle mit gefärbten Zeilen

E

emarci

Neues Mitglied
Hi,

Habe folgende HTML Seite mit validem Code:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testpage</title>
    <style type="text/css">
    <!--
    table.rounded {
        background: #a3a3a3;
        margin-bottom: 30px;
        border-radius: 15px;
        border-collapse: collapse;
        box-shadow: 0px 0px 1em black;
    }
    tr.even {
        background: #bbbbbb;
    }
    tr.uneven {
        background:#e8e8e8;
    }
    //-->
    </style>
</head>
<body>
<table class="rounded" style="width:500px; border-radius:15px;">
    <tr class="uneven">
        <th>Informationen ändern</th>
        <th></th>
    </tr>
    <tr class="even">
        <th style="width:250px;">Ihr Vorname:</th>
        <th><input name="first_name" size="48" value="" type="text"></th>
    </tr>
    <tr class="uneven">
        <th>Ihr Nachname:</th>
        <th><input name="last_name" size="48" value="" type="text"></th>
    </tr>
    <tr class="even">
        <th>Ihre E-Mail Adresse:</th>
        <th><input name="email_address" size="48" type="text"></th>
    </tr>
</table>
</body>
</html>
Das Problem: Die Ecken werden abgerundet und der Teil der raus steht mit 50%tiger Transparenz angezeigt (siehe Bild).
Das ganze ist kein Browserbezogenes Problem, da es in jedem Browser so ist.
borderrouded.jpg
Wenn ich die einzelnen <tr> nicht einfärbe passt das ganze auch.

Hat jemand hierfür eine Lösung oder das selbe Problem?

Danke schonmal für alle Beiträge (ausgeschossen "benutze google" Beiträge).
 
Die Lösung deines Problems hast du schon genannt: Die färbst dir <tr>-Tags ein. TR steht für Table-Row (Tabellen-Reihe). Du färbst also die Reihe ein, in der deine <td>-Tags stehen. Und nur die <td>-Tags werden abgerundet.



lascaux
 
Und wenn es ein Formular sein soll, fehlt auch ein eben solches. Und dann würde ich raten das Ganze nicht mit einer Tabelle aufzubauen sondern wenn überhaupt mit fieldset, label und den Formularfeld-Elementen. Das lässt sich dann auch einfacher stylen als Tabellen.
 
lascaux schrieb:
Die Lösung deines Problems hast du schon genannt: Die färbst dir <tr>-Tags ein. TR steht für Table-Row (Tabellen-Reihe). Du färbst also die Reihe ein, in der deine <td>-Tags stehen. Und nur die <td>-Tags werden abgerundet.
Zum Vergrößern anklicken....
Naja, wenn die <td> Tags abgerundet wären könnte ich Sie ohne Probleme einfärben. Es entsteht aber der selbe Effekt wie wenn ich die tr Tags färbe. Nein nein, bei runden TD Tags sieht das auch anders aus oder anders gesagt es wird schon der table Tag abgerundet.
Ich verstehe nur nicht warum der Teil der übersteht 50% Transparent angezeigt wird, evtl. kann man den Überhang ja noch komplett ausblenden. Ich dachte border-collapse sollte das Problem lösen, aber standartmäßig ist bereits "collapse" als Wert hinterlegt und nochmals die Eigenschaft setzten bringt leider nichts.

threadi schrieb:
Und wenn es ein Formular sein soll, fehlt auch ein eben solches. Und dann würde ich raten das Ganze nicht mit einer Tabelle aufzubauen sondern wenn überhaupt mit fieldset, label und den Formularfeld-Elementen. Das lässt sich dann auch einfacher stylen als Tabellen.
Zum Vergrößern anklicken....
Thx, mit fieldset und label habe ich noch nicht gearbeitet. Aber mal unabhängig vom Formular, denn das habe ich mit Absicht nicht gepostet, da der <form> Tag ja nichts mit dem Design zu tun hat und ich benutze Tabellen auch für Ansichten bei denen die Tabellenansicht einfach die optimalste ist. Darum wäre es mir schon wichtig zu erfahren warum der Überhang mit Transparenz angezeigt wird.

PS:
Runde <td> Tags (hier rot) sehen übrigens so aus:
td-rounded..jpg


Update:

OK, mit der Eigenschaft "overflow" funktioniert es einigermaßen. Einmal overflow:hidden; und es funktioniert unter Webkit.
Unter Gecko (v13) gibt es noch einen Bug und Opera (v12) interpretiert es nicht. Zum IE (v9) muss ich ja wohl nichts sagen.

Ich persönlich bin zwar Firefox-User, aber in diesem Fall ist der Best-View wohl eher mit Webkit basierenden Browser (siehe Bild):
best-view.jpg
Sehr gut gerundet und die Textbox nicht beschnitten. Sieht zwar noch nicht perfekt aus aber das sollte ja nur noch ein bisschen feintuning mit "padding" sein.
Schade, das gehört meineswissens noch zu CSS 2, aber ich werde noch ein bisschen debuggen und hier posten wenn ich zu einem Ergebnis komme.

Danke an alle die sich ein paar Gedanken gemacht haben, manchmal muss man einfach mal ein Thread starten um selbst auf die Lösung zu kommen.
 

Anhänge

  • best-view.jpg
    best-view.jpg
    13,1 KB · Aufrufe: 5
Zuletzt bearbeitet:
Wer hat dir zu overflow geraten? Wir nicht soweit ich sehe. Diese Eigenschaft wird leider viel zu oft für unnötige Einsatzzwecke verwendet, wie auch in diesem Fall.

Moderation: Verschoben von HTML zu CSS.
 
Für den Fall, dass es doch eine Tabelle werden soll. Hier sind weitere Klassen für die <th> eingeführt. Vielleicht kann du dich ja damit anfreunden.
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testpage</title>
    <style type="text/css">
   


table {
       width:500px;
       margin: 30px;
       border-radius: 15px;
       border-collapse: collapse;
       box-shadow: 0px 0px 1em black;
    }

th {
 padding:4px;
}

th.label {
 width:250px;
}

.even {
        background: #ada;
    }
 
.uneven {
        background:#dad;
     }

.rol {
        border-radius: 15px 0 0 0;
}

.ror {
        border-radius: 0 15px 0 0;
}

.rul {
        border-radius: 0 0 0 15px ;
}

.rur {
        border-radius: 0 0 15px 0;
}

    </style>
</head>
<body>
<table>
    <tr>
        <th class="rol uneven">Informationen ändern</th>
        <th class="ror uneven"></th>
    </tr>
    <tr class="even ">
        <th class="label">Ihr Vorname:</th>
        <th><input name="first_name" size="48" value="" type="text"></th>
    </tr>
    <tr class="uneven">
        <th class="label">Ihr Nachname:</th>
        <th><input name="last_name" size="48" value="" type="text"></th>
    </tr>
    <tr>
        <th class ="label even rul">Ihre E-Mail Adresse:</th>
        <th class ="even rur"><input name="email_address" size="48" type="text"></th>
    </tr>
</table>
</body>
</html>

Border-radius lässt sich wohl nicht auf <tr> anwenden?!

Hier mit <form> ( Hoffendlich richtig )
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testpage</title>
    <style type="text/css">
   
* {
 padding:0;
 margin:0;
}


form {
       width:500px;
       margin: 30px;
       border-radius: 15px;
       box-shadow: 0px 0px 1em black;
    }

fieldset {
 margin:0;
 padding:6px;
 border:none;
}

input {
 padding:5px;
}

label {
 padding:5px;
 display:block;
 width:200px;
 float:left; 
}

.even {
        background: #ada;
    }
 
.uneven {
        background:#dad;
     }

.ro {
        border-radius: 15px 15px 0 0;
        background: #dad;
}

.ru {
        border-radius: 0 0 15px 15px ;
        background:#ada;
}


    </style>
</head>
<body>
<form>
    <fieldset class="ro">
        <label>Informationen ändern</label>
       
    </fieldset>
    <fieldset class="even ">
        <label for="vorname">Ihr Vorname:</label><input id="vorname" name="first_name" size="30" value="" type="text">
    </fieldset>
    <fieldset class="uneven">
        <label for="nachname">Ihr Nachname:</label><input id="nachname" name="last_name" size="30" value="" type="text">
    </fieldset>
    <fieldset class="ru">
        <label for="mail">Ihre E-Mail Adresse:</label><input id="mail" name="email_address" size="30" type="text">
    </fieldset>
</form>
</body>
</html>
 
Zuletzt bearbeitet:
Du kannst border-radius auch so verwenden:

HTML: 
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

Du musst bedenken, dass nicht jeder User einen webkit-Browser benutzt. Die Mehrheit nutzt eben noch die IE-Serie.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben