設置填充/溢出表的餘量

我有一個表格，住在一個div內。該表中有一個與窗口重疊的巨大內容，因此我需要向左滾動以查看其內容。問題在於表格右側沒有填充或邊距，使其更易於閱讀。設置填充/溢出表的餘量

如何向該表格添加填充或邊距？

下面是HTML的樣子（請注意，下面的CSS不工作）：

<html> 
<head></head> 
<body> 
<div id="table"> 
    <table> 
     <thead>...</thead> 
     <tbody>...</tbody> 
    </table> 
</div> 
<style> 
table td, table th, table td {border: 1px solid red} 
table { padding-right: 100px; border: 1px solid blue} 
table thead, table tbody {padding-right: 100px;} 
</style> 
</body> 
</html>

來源

2013-01-15 petwho

將css放在head部分..或者在.css文件中並在head標籤中創建鏈接 –

當然，這僅僅是爲了演示目的 – petwho

感謝您的回答。但是，我發現通過javascript實現它更容易，而且非常靈活。在這裏，我正在使用jQuery框架：

$('#table').width() = $('table').width() + 20; 
$('table').css('padding-right', '10px');

這將使表的寬度，因爲它第一次打算是。

來源

2013-01-15 09:40:08 petwho

只需添加display: inline-block;表

來源

2013-01-15 07:30:52

你可以試試這個？

<style type="text/css"> 
     #table table td,#table table th,#table table td {border: 1px solid red} 
     #table table { padding-right: 100px;color: blue} 
     #table table thead,#table table tbody {padding-right: 100px;} 
</style>

來源

2013-01-15 07:44:22 midstack

HI midstack，謝謝你的回答。你的解決方案似乎首先起作用。但是，當我將樣式應用於表格時（通過向其添加邊框）。它不起作用，因爲我打算這樣做。你能回顧一下你的答案嗎？謝謝。 – petwho

你能把它寫成：\t \t #table table，#table table td，#table table th {border：1px solid＃F00;} #table table {padding-right：100px;顏色：＃00F;} #table table thead，＃table table tbody {padding-right：100px;} \t我已經嘗試過並且工作正常，但您必須將填充作爲邊距以使其看起來不錯 – midstack

在CSS中，你不需要前綴。或＃表，TD，TR，P，

在您的問題

，在這裏添加如下代碼

#table table thead, table tbody {padding-right: 100px;}

注意＃......＃因爲是id選擇。

好運..！

來源

2013-01-15 07:52:21 Venkat

設置填充/溢出表的餘量

回答

相關問題