html table width>page width right padding not working - html

Question

I have a table that has a lot of columns and I need the columns to be the same width, so the table total width is bigger than page width, and that's fine because the browser shows the horizontal scrollbar. What's I can't get around is that, while left and top padding are ok, the right padding is not working, there's no space between table right end and the browser frame.
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
table {
width: 200%;
padding: 10px 0px 10px 0px;
background-color: #800000;
}
td {
background-color: #ffa500;
}
Here's a fiddle

Answer 1

As also mentioned in the answer by Umar A., You have used padding as padding: 10px 0px 10px 0px; That means, padding top and bottom is 10px and padding left and right is 0px; Use it as
padding:10px if you want it on all sides.
But, here is the example mentioned, it appears that you do not want padding. You actually require margin-right to be applied as whitespace on the right side of the table. Even if you put a value of margin-right, it will not have effect.
It happens so, because since the layout width is > 100%, element + margin-right extends beyond viewport now, and complete viewport width is consumed by table. Make view port less than 100% and margins are present. You gave your table a width of 200%. This is 200% of what? Entire page body. So, that means, you want table to be 200% of its parent container. Now, stuff like margin is applied to an element with comparison to its surrounding elements like parent container. But towards the right side, element size extends beyond container size. So, properties like margin do not have any visual effect. You can see it in snippet below. I have wrapped the table in a div to show application of margin-right.
div{
overflow:auto;
border:7px solid black;
}
table {
width: 80%;
margin-right:150px;
background-color: #800000;
display:inline-block;
}
td {
background-color: #ffa500;
}
<div>
<table>
<thead></thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>
</table>
</div>
But when you bring width of table to less than 100%, margin-right will start to apply itself in comparison to its surrounding elements. Because now, width of table + margin-right < width of document body, which is 100% of window viewport by default. So, the effect that you want to achieve can be created by wrapping table in a block level element like div, and allowing it to take expanse of div. Give it relative positioning and then define that it should be placed 5px from right side. If you specify left also, left will override right.
Another reference
div{
overflow:auto;
position:relative;
right:5px !important;
height:100%;
}
table {
width: 200%;
background-color: #800000;
}
td {
background-color: #ffa500;
}
<div>
<table>
<thead></thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>
</table>
</div>

Answer 2

As a general rule of thumb, think of padding as inward-facing spacing, and margin as outward-facing spacing.
That being said, the table element will not apply margin-right if the table's width is set to 100%, so I would recommend wrapping the table in a div with margin-right: 10px; for example.
Update:
Here's a working fiddle. If you're trying to simulate a wide table, remember a table will take all the available width, no need to set it to width: 200%; as that will give you unexpected results.

Answer 3

The css syntax for padding shorthand property is as follows:
padding: top right bottom left;
And you set it as follows:
padding: 10px 0px 10px 0px;
Which means:
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
It's normal, thus, that your table behaves like that.
If you check your fiddle with the inspector of your browser you have this result:
You can see that the body has 8px of margin.
And the table...
...has padding left and right set to 0px.
PS: Zoom to view the images well, or click on it.

Answer 4

Setting the width to 200% will not get clear results as per Johnny Kutnowski, which is correct.
Also if you rely on Browser's scroll, then even if you put the table inside a div, it will exceed and stick to the corners of your screen.
try this code if its acceptable to have a div which has a scroll if the table width exceeds.
Since you mentioned you have many columns:
<div class="container">
<table>
<tr><td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr><td>D</td><td>E</td><td>F</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr><td>G</td><td>H</td><td>I</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
</table>
</div>
table {
width: 100%;
padding: 10px 0px 10px 0px;
background-color: #800000;
}
td {
background-color: #ffa500;
min-width: 50px !important;
}
.container {
padding-right: 100px !important;
overflow: auto;
}
Try this JsFiddle

Answer 5

You can not set padding to a table element with css. Only to td like
table td {padding: 10px;}

Answer 6

try using only padding-right:12px;
i think this will work