[問題] 關於縮小視窗寬度時，100%寬度的表格會溢

[banana2014 (香蕉共和國)]

以下是留言版的部分原始碼內容：

http://banana2014.er-webs.com/test-gbook.html

請問為什麼我將瀏覽器視窗的寬度縮到最窄之後，上方的狀態列還是會凸出右邊的部分?

我已經將狀態列的寬度設成100%，照理來講不是應該充滿整個寬度而不會凸出或露出空白
的嗎? 為什麼還是會凸出呢?

如果是因為所有字的寬度加表格邊框已經超過瀏覽器視窗的寬度才被迫凸出來，請問能用
什麼方式來解決呢? (例如怎樣把凸出來的部分改分到第二列去呢)

謝謝

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.139.149.54
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1451593021.A.AA7.html
→ s89227: 因為border不算在width裡吧？
→ Hevak: 要解決1樓說的問題的話，100%的東西要做
→ Hevak:                                 box-sizing: border-box;
→ banana2014: 嗯… 還是一樣的結果
→ banana2014: 我想是因為所有文字的寬度加總起來大於100%的寬度，所
→ banana2014: 以才會凸出來，不曉得大家有什麼可以解決的辦法呢?
我很納悶的是說為什麼表格沒有「自動換行」的機制呢? 又如果在<td>裡實行word-wrap: break-word;或把nowrap
取消掉的話，整個版面會變得很糟糕，所以該如何說如果表格的實際寬度已超過100%的寬度，讓一些<td>自動跳到第
二列去?
※ 編輯: banana2014 (101.139.137.178), 01/01/2016 14:23:23
推 lolikung: word-break ?
請問像這樣該如何判斷文字是否已超過指定寬度是不是就要用javascript去做了?

※ 編輯: banana2014 (101.139.137.178), 01/01/2016 14:45:44
推 eight0: 為什麼表格會有自動換行的機制？這樣第X欄第Y列不就隨時不
→ eight0: 一樣
推 eight0: 用 flexbox http://output.jsbin.com/pesisuxufe
→ eggimage: 為什麼一定要用table....別用table來排版面


    謝謝各位的回答。 但是想請教一下eight0大，為什麼我用flexbox時儲存格左右之間
    的spacing會比上下間還來得細呢? 亦即分隔線為什麼會那麼細呢? 如圖紅圈處。 該
    如何把分隔線的寬度與表格的border同寬呢? 謝謝

    http://i.imgur.com/M2NTqyE.jpg



※ 編輯: banana2014 (101.139.102.213), 01/03/2016 17:57:12
推 eight0: 因為你原先用 cellspacing 將 td 分開，但使用 flexbox 時
→ eight0: 這個屬性沒有作用
→ eight0: 可以改用 CSS 的 margin 或 border