HTML Tabelle abrunden

[Binary]

Hallo zusammen,

mein HTML-Code

<table style="text-align: left; width: 100%;" rules=none> 
  <tbody> 
    <tr> 
      <td class="border"><div id="img_life_story"><img src="img/Lebensabschnitt-Studium.png"></div> 
      <center><div id="caption_life_story1">Studium</div></center> 
      </td> 
      <td class="border"> 
      <table border="0" width=100% bgcolor="#EFECE8"; rules=none> 
      <tr> 
        <td class="style1"><img src="img/schirm.png"> Vorsorge </th> 
      </tr> 
      <tr> 
        <td class="style">Berufsunf&auml;higkeitsversicherung <img src="img/check.png"></td> 
      </tr> 
      <tr> 
      <td class="style1"><img src="img/health.png"> Gesundheit</th> 
    </tr> 
    <tr> 
      <td class="style">Auslandskrankenversicherung <img src="img/cross.png"></td> 
    </tr>   
    <tr> 
        <td class="style1"><img src="img/safety.png"> Versicherung </th> 
    </tr> 
    <tr> 
      <td class="style">Hausratversicherung <img src="img/check.png"></td> 
    </tr>   
    <tr> 
        <td class="style1"><img src="img/percentage.png"> Finanzierung </th> 
    </tr> 
    <tr> 
      <td class="style">Studienfinanzierung <img src="img/cross.png"></td> 
    </tr> 
    </table> 
      <center><div id="caption_life_story2">Relevante Themen</div></center> 
      </td> 
    </tr> 
  </tbody> 
</table>

Mein CSS-Code

#caption_life_story1
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    padding-top:12px;
    font-weight: bold
}

#caption_life_story2
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    font-weight: bold
}

#img_life_story
{
    padding-top:23px;
}

#img_vorsorge
{
    padding-left:3px;
}

td.border {
    border:0px solid white;
}

td.style {
  color: #35637D;
  font-size: 11px;
  text-align:right;
}

td.style1 {
  color: #8B7B62;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 12px;
  border-radius:25px;
}

Meine Aufgabe: Ecken abruden.
Mein Problem: Viele Beispiele ausprobiert aber diese passen nicht auf die Struktur meiner Tabelle bzw. ich bin nicht fähig sie anzupassen.

Jemand eine Idee?

Vielen Dank und viele Grüße

Edit: Lösung:

table.round {
\-moz-border-radius: 0.5em;
}

 

[zatec]

Ich denke du wirst keine browserkompatible Lösung finden, besonders nicht wenn es um Tabellen geht. Zumindest nicht ohne Grafiken.
Ich persönlich würde mit Hintergrundgrafiken arbeiten, die ich der obersten und / bzw. untersten Zeile zuweise.

 

[Binary]

Danke!
Ich vermute mal du meinst so etwas hier oder:
HTML tables tutorial with rounded corners

Bei mir war der halbkreis dann blöderweise in der Tabelle und nicht am Rand.

 

[toney]

-moz-border-radius funktioniert aber nur im Mozilla.

probiers es mal damit:

-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */

Diese Variante funktioniert schonmal überall außer im Internet Explorer.

Für den IE gibts allerdings einen Hack. ich hab ihn selbst noch nicht ausprobiert, aber so müsste es funktionieren:
hier die border-radius.htc herunterladen, auf deinen Webspace laden und so ins CSS einbinden:

behavior:url(border-radius.htc)

 

[Binary]

Aller besten Dank!