Wie formatiere ich HTML-Tabelle mit Inline-Stilen, um wie eine gerenderte Excel-Tabelle aussehen?

Ich bin derzeit stecken Grenzen in einer HTML-Tabelle. (Ich benutze Inline-Stile für eine bessere Darstellung in E-Mail-Clients) Ich habe dieses Stück Code:Wie formatiere ich HTML-Tabelle mit Inline-Stilen, um wie eine gerenderte Excel-Tabelle aussehen?

<html> 
    <body> 
     <table style="border: 1px solid black;"> 
      <tr> 
       <td width="350" style="border: 1px solid black ;"> 
        Foo 
       </td> 
       <td width="80" style="border: 1px solid black ;"> 
        Foo1 
       </td> 
       <td width="65" style="border: 1px solid black ;"> 
        Foo2 
       </td> 
      </tr> 
      <tr style="border: 1px solid black;"> 
       <td style="border: 1px solid black;"> 
        Bar1 
       </td> 
       <td style="border: 1px solid black;"> 
        Bar2 
       </td> 
       <td style="border: 1px solid black;"> 
        Bar3 
       </td> 
      </tr> 
      <tr style="border: 1px solid black;"> 
       <td style="border: 1px solid black;"> 
        Bar1 
       </td> 
       <td style="border: 1px solid black;"> 
        Bar2 
       </td> 
       <td style="border: 1px solid black;"> 
        Bar3 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

es so gemacht wird: alt text

Ich möchte die Tabelle wie gerendert werden Excel würde eine Tabelle, mit inneren und äußeren Rand machen: alt text

Quelle

2010-09-08 citronas

Welchen Browser benutzen Sie? In Chrome 6 sieht es folgendermaßen aus: http://jsfiddle.net/JceAc/. – Kyle

Ich benutze Firefox 3.6.8 – citronas

table { 
    border-collapse:collapse; 
}

Quelle

2010-09-08 10:01:30

danke, funktioniert perfekt;) – citronas

Es funktioniert und sieht aus wie ein Charme –

hinzufügen cellpadding und cellspacing es zu lösen. Edit: Auch doppelte Pixelgrenze entfernt.

<style> 
td 
{border-left:1px solid black; 
border-top:1px solid black;} 
table 
{border-right:1px solid black; 
border-bottom:1px solid black;} 
</style> 
<html> 
    <body> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <td width="350" > 
        Foo 
       </td> 
       <td width="80" > 
        Foo1 
       </td> 
       <td width="65" > 
        Foo2 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Bar1 
       </td> 
       <td> 
        Bar2 
       </td> 
       <td> 
        Bar3 
       </td> 
      </tr> 
      <tr > 
       <td> 
        Bar1 
       </td> 
       <td> 
        Bar2 
       </td> 
       <td> 
        Bar3 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Quelle

2010-09-08 10:02:27

Wie formatiere ich HTML-Tabelle mit Inline-Stilen, um wie eine gerenderte Excel-Tabelle aussehen?

Antwort

Verwandte Themen