如何在整個屏幕上使用很少的文字製作表格？

我有兩列一個很簡單的表，我想該表延到頁面的，不論它包含內容的整個寬度（它幾乎不含任何的文字，這就是問題所在）：如何在整個屏幕上使用很少的文字製作表格？

<div> 
    <table> 
    <tr> 
     <th>Title</th> 
     <td>Some text</td> 
    </tr> 
    </table> 
</div>

問題是：這在Firefox中不起作用（我甚至不敢嘗試使用Internet Explorer）。

這是CSS：

div { 
    max-width: 640px; 
    float: left; 
} 

table { 
    width: 100%; 
} 

table th, 
table td { 
    width: 100%; /* looks strange, but gives both columns equal length in Safari */ 
}

誰能告訴我什麼，我在這裏失蹤？

感謝您的幫助......

來源

2012-12-04 Tintin81

讓您th和td 50％廣，不是100％ - DEMO

html, body { 
    margin: 0; 
    padding: 0; 
} 

table { 
    width: 100%; 
    padding: 0; 
} 

table th, table td { 
    width: 50%; 
    border: 1px solid red; 
}

來源

2012-12-04 17:07:42

+1了相同的答案：P – TheAlbear

謝謝！我在上面評論了TheAlbear的回答。也許我在第一個問題中沒有提供足夠的信息。希望現在更好:-) – Tintin81

@ Tintin81你想伸展你的表除了它的父寬？ –

只是改變CSS來

table th, 
table td { 
    width: 50%; 
}

問題目前您的表格中的每個單元格都是100％寬度的表格。

See for example

來源

2012-12-04 17:09:08 TheAlbear

回覆讚的:) –

好的，當然你是對的。這是我嘗試的第一件事。這個問題似乎是包含'div'，儘管它具有'max-width'來使其響應。我剛剛更新了我最初的問題。希望你不介意。 – Tintin81

改變從100％td至50％是真實的，但你也應該添加border-collapse你的表，因爲你用你的細胞邊界。

width:80%工作也沒關係 - 無需顯式的像素寬度（至少在FF，鉻）

http://jsfiddle.net/UdbRQ/

來源

2012-12-04 18:16:30 Dawson

是的，你是對的。實際上，我在我的代碼中使用了'border-collapse'。我只想保留最初的文章，所以我省略了它。 – Tintin81

如何在整個屏幕上使用很少的文字製作表格？

回答

相關問題