CODEWITHSUNDEEP
htmlcsscss-tables
anglimasS
anglimasS

Reputation: 1344

table-row border issue - want some padding or margin (left and right side)

Click the link http://jsfiddle.net/anglimass/njAFp/

I want border left and right some space:

Now:

enter image description here

Want:

enter image description here

Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?

Upvotes: 0

Views: 2479

Answers (2)

vector
vector

Reputation: 7566

I don't think you can do it on TR level. How about TD level:

table tbody tr td {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

table tr td:first-child {
    padding-left: 20px;
    border-left: 10px solid red;
}

table tr td:last-child,
td.last-td {
    padding-left: 20px;
    border-right: 10px solid red;
}

This would be important in terms of x-browser compatibility as well.

EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')

Upvotes: 1

Lowkase
Lowkase

Reputation: 5699

It's kind of hacky, but it produces the effect you are looking for:

http://jsfiddle.net/njAFp/3/

<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th></th>
            <th>lai</th>
            <th>pola</th>
            <th>vaala</th>
            <th>elah</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="blank"></td>
            <td>ennala</td>
            <td>yamla</td>
            <td>varamattala</td>
            <td>vettiruven</td>
            <td class="blank"></td>
        </tr>
    </tbody>
</table>

​

    table{width:400px; height:auto; background:silver;border-collapse:collapse;}
    table thead{}
    table tbody{}
    table tr{ background:silver;}
    table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}


td.blank { width:20px; border:0; }

Upvotes: 0

Related Questions