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

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

Content-Disposition: inline; filename=data.xls

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

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

<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 設定:

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

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

<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;", 才能正確地在儲存格中斷行.