styling table rows inside a div

Discussion in 'CSS' started by sudhakararaog, Oct 6, 2009.

0
  1. #1
    i am using a container div inside which i have used a table. i am using equal padding on the left and right side of the container div for spacing purpose on left and right side.

    for example the width of container div is 500px and left and right padding is 20px each so the width of the container is now 500-40 which is 460px so i have set the table width also to 460px

    now when i start the table row the table data is not starting after the gap on the left side instead it is starting from the left edge of the container div, how do i make the table row and table data to start in a way that they leave a gap of 20px each on the left and right side.

    my code is

    <div id="container">
    <table width="460" cellspacing="0" callpadding="0" border="0">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>


    <tr>
    <td>3</td>
    <td>4</td>
    </tr>


    </table>
    </div>

    #container{
    float: left;
    width: 460px;
    height: auto;
    padding: 0 20px 0 20px;
    }
     
    sudhakararaog, Oct 6, 2009 IP
  2. darkmessiah

    darkmessiah Peon

    Messages:
    500
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you sure you didn't mean something like this.

    td { padding: 0 20px 0 20px; }
    Code (markup):
    
<html>
<head><title></title></head>
<body>

<div style="float: left;
width: 460px;
height: auto;
padding: 0 20px 0 20px;
border: 1px solid red;" >
<table width="460" cellspacing="0" callpadding="0" border="1">
<tr>
<td style="padding: 0 20px 0 20px;">1</td>
<td style="padding: 0 20px 0 20px;">2</td>
</tr>


<tr>
<td style="padding: 0 20px 0 20px;">3</td>
<td style="padding: 0 20px 0 20px;">4</td>
</tr>


</table>
</div>

</body>
</html>
    Code (markup):
     
    darkmessiah, Oct 6, 2009 IP
  3. Typo Tat

    Typo Tat Peon

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You can give the table a width of 100%, that way you're sure it's covering the entire div.

    Overall, I'd advise you not to use padding at all, and recreate the same effect via margin. In the case you describe, paddings will mess you up. Try looking at your page in Internet Explorer vs Firefox, and you'll see what I mean.
     
    Typo Tat, Oct 6, 2009 IP
  4. FinalHuntMedia

    FinalHuntMedia Peon

    Messages:
    180
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    table {

    float: left;
    width: 460px;
    margin: 0px 0px 0px 20px;

    }

    that will center the table itself within the 500px <div>

    because padding is handled differently among browsers, you should lose the padding on the div for the right and left and use the margin on the table.

    Make sure that your DOCTYPE declaration is correct as well.
     
    Last edited: Oct 7, 2009
    FinalHuntMedia, Oct 7, 2009 IP