van_folmert
van_folmert

Reputation: 4517

margin-right doesn't work on a table

Here's a fiddle.

Why CSS for td.mar doesn't work?
Or: how to make table keep space from the screen's border on the right side?

EDIT: for anyone who might be looking for an answer: display: block and border-collapse: collapse were disabling the margin-right property

Upvotes: 2

Views: 3511

Answers (4)

Charles Ingalls
Charles Ingalls

Reputation: 4561

You can work with a padding-right ?px; on the table.

Check out: http://jsfiddle.net/s9pF5/11/

Upvotes: 2

AfromanJ
AfromanJ

Reputation: 3932

How about wrapping the table?

HTML:

<div class="margin">
<table border=1>
<tr>
    <td class="pad-l">item</td>
    <td class="pad-r">item</td>
    <td class="pad-t">item</td>
    <td class="mar">margin</td>
</tr>
</table>
</div>

CSS (added two styles):

table {
    width: 100%
}
div.margin {
    margin-right: 50px;
}

Jsfiddle

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Your can create one td and write the css as Like this Css

.noBorderwithMargin{border:0;padding:0;margin:0;padding-left:50px;}

HTML

<table border=1>
    <tr>
        <td class="pad-l">item</td>
        <td class="pad-r">item</td>
        <td class="pad-t">item</td>
        <td class="noBorderwithMargin"></td> // add this td 
        <td class="mar">margin</td>
    </tr>
</table>

Live Demo

Upvotes: 0

npst
npst

Reputation: 136

If you want the table to have a margin to the right, you should apply that margin-right to the table, not the td.

Upvotes: 0

Related Questions