[HTML][CSS] 使用 HTML <table> 匯出 Excel 時的斷行 (<br/>) 處理

在網頁的應用上, 有時我們會用 HTML 的 <table> 包裝要匯出的資料, 並設定匯出的檔案是 Excel.
例如在 HTTP Header 中利用 Content-disposition 讓使用者下載指定的檔案:

?

1	Content-Disposition: inline; filename=data.xls

不過有人會以為在 <td> 中加入 <br/> 會讓資料在 Excel 的儲存格中換行. 結果實際並不是這樣.

例如以下的 HTML, 會在 Excel 中形成下圖的結果 (加入 <br> 造成分成兩列的結果).

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<table align="center" border="1" cellpadding="3"   cellspacing="1" bgcolor="#336699" class="e12" width="98%">   <tr bgcolor="#CCDDEE">     <td><p align="center">No.</p></td>     <td><p align="center">Content</p></td>   </tr>   <tr bgcolor="#FFFEEE">     <td align="center">1</td>     <td align="center">       Hello<br />World     </td>    </tr>  </table>

若我們將一個簡單的 Ecxcel 另存成網頁, 再將該網頁檔用文字編輯器開啟, 可以發現該網頁加入了許多 <style>, 其中有一個 br 的 CSS 設定:

?

1 2	br     {mso-data-placement:same-cell;}

接下來就試著把 <br> 加上這個 style 的設定看看:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<table align="center" border="1" cellpadding="3" cellspacing="1" bgcolor="#336699" class="e12" width="98%">   <tr bgcolor="#CCDDEE">     <td><p align="center">No.</p></td>     <td><p align="center">Content</p></td>   </tr>   <tr bgcolor="#FFFEEE">     <td align="center">1</td>     <td align="center">       Hello<br style="mso-data-placement:same-cell;">World     </td>    </tr>  </table>

最後就會產生我們希望的斷行結果, 如下圖:

結論: 請記得在 <br> 中加上 style="mso-data-placement:same-cell;", 才能正確地在儲存格中斷行.