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

HTMl Table Gitterlinien Farbe ändern

Binary

Binary

Neues Mitglied
Hallo zusammen,

ich würde gerne die Gitternetzfarben in meiner Tabelle ändern.
Durch rules=none habe ich schon erreicht, dass der Rahmen drum herum verschwindet.
Die Linien der Spalten bleiben allerdings erhalten.
Diese würde ich gerne grau statt schwar färben.

Mein HTML-Code
HTML: 
<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

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;
}

Jemand eine Idee?

Vielen Dank und viele Grüße
 
Vielleicht so:

In deinem Beispiel waren ein paar kleinere Fehler (etwa td-Element mit </th>-Tag geschlossen). Die habe ich zu beheben versucht.

HTML: 
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">
#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;
}

table.outer {
    text-align: left;
    width: 100%;
    border: none;
}

table.inner {
    width: 100%;
    background: #EFECE8;
}

table.inner td, table.inner th {
    border: 1px solid #ccc;
}
        </style>
    </head>

    <body>
        <table class="outer">
            <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 class="inner">
                           <tr>
                                <td class="style1"><img src="img/schirm.png"> Vorsorge </td>
                            </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</td>
                            </tr>
                            <tr>
                                <td class="style">Auslandskrankenversicherung <img src="img/cross.png"></td>
                            </tr>
                            <tr>
                                <td class="style1"><img src="img/safety.png"> Versicherung </td>
                            </tr>
                            <tr>
                                <td class="style">Hausratversicherung <img src="img/check.png"></td>
                            </tr>
                            <tr>
                                <td class="style1"><img src="img/percentage.png"> Finanzierung </td>
                            </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>

    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben