petwho petwho - 11 days ago 9
CSS Question

Set padding/margin for overflow table

I have a table that lives inside a div. That table has a huge content in it that overlap the window, so I need to scroll far to the left to see its content. Problem is that the table doesn't have a padding or margin on the right to make it more easier to read.

How can I add padding or margin to that table?

Here is the html looks like (Note that the css below doesn't work):

<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>

Answer

thank for your answer. However I see that doing it by via javascript is much easier and also very flexible. Here, I'm doing using jQuery framework:

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

That will make the table width as it first intended to be.