修正手機版無法看到超出銀幕的表格寬度

一般用傳統表格的 HTML 語法，放到網頁上，因為都會設定到表格寬度，這就會造成當使用RWD網頁時，無法像一般文字或圖片自動調整尺寸

無法向右捲動	ABC	ABC
ABC	ABC	ABC

這時如果在table 外圍加上一個Div 設定css 屬性為 overflow: auto
就能在手機銀幕不夠寬時，向右捲動看到表格的內容了

 

語法很簡單，找到 <table> 標籤，再在外層再包一個Div元素，加入CSS屬性 overflow: auto;  則會自動判動需不需要出現捲軸了(注意下方 overflow 前面的雙引號要改為半型字型)

<div style=“overflow: auto;”>
<table style=”width: 700px;”>
<tbody>
<tr>
<td style=”width: 233px;”>向右捲動能看得到內容</td>
<td style=”width: 233px;”>ABC</td>
<td style=”width: 233px;”>ABC</td>
</tr>
<tr>
<td style=”width: 233px;”>ABC</td>
<td style=”width: 233px;”>ABC</td>
<td style=”width: 233px;”>ABC</td>
</tr>
</tbody>
</table>
</div>

記得尾端要再加上一個</div> 的結束標籤，才算完整的HTML語法