如何使用內聯樣式格式化html表格以使其看起來像呈現的Excel表格一樣？

我目前堅持在html表中設置邊框。（我用一個更好的渲染內聯樣式在電子郵件的客戶端），我有這樣的一段代碼：如何使用內聯樣式格式化html表格以使其看起來像呈現的Excel表格一樣？

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

它呈現： alt text

我想表像被渲染Excel中會呈現一個表，帶內，外邊框： alt text

來源

2010-09-08 citronas

您正在使用哪種瀏覽器？在Chrome 6中，看起來像你想在這裏：http://jsfiddle.net/JceAc/。 – Kyle 2010-09-08 10:02:14

我使用Firefox 3.6.8 – citronas 2010-09-08 10:06:58

table { 
    border-collapse:collapse; 
}

來源

2010-09-08 10:01:30

謝謝，作品完美;） – citronas 2010-09-08 10:02:49

它的作品，看起來像一個魅力 – 2016-10-26 04:59:00

添加的cellpadding和cellpacing來解決這個問題。編輯：也刪除了雙像素邊框。

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

來源

2010-09-08 10:02:27

如何使用內聯樣式格式化html表格以使其看起來像呈現的Excel表格一樣？

回答

相關問題