• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Table padding

I have a table for which I have defined at the css padding=0. But I want for specific cells to have bigger padding. How can I get this?
0
darkbluegr
Asked:
darkbluegr
  • 2
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
You may not be able to with a table.  This page http://www.quirksmode.org/css/box.html shows how the "box model" treats padding, margin and border.  In the current model, they are all Outside the content box.

You can try and see what happens.  Give one of the <td>s a 'class' and define some padding for it.
0
 
Lukasz ChmielewskiCommented:
For a specific cells... you have to set an attribute of id or class. Then set their padding to whatever you want with:
.mycell{
 padding: 5px !important!;
}
0
 
Mark BradyPrincipal Data EngineerCommented:
or you can style every cell differently when you display them like this.

<td style="padding-left:5px;padding-right:5px">Text</td>
<td style="padding-left:10px:padding-right:20px">Some more text</td>

You can do it that way or you can create all your different "classes" and assign different classes to each td cell.

.class1{
padding-left:5px;
padding-right:5px;
}
.class2{
padding-left:10px;
padding-right:20px;
}
.class3{
padding-left:0px;
padding-right:0px;
padding-top:2px;
padding-bottom:2px;
}

Then all you do set the class name when you insert the table.

<table><tr><td class="class1">Some text</td><td class="class2">More text</td><td class="class3">Some more text</td></tr>
</table>

I think you get the idea?
0
 
Dave BaldwinFixer of ProblemsCommented:
To take @elvin66's code a little further, tables are the things that 'break the rules' and also don't 'inherit' styles for the most part.  This little page shows that the padding is done on the inside of the 'td's whereas with a 'div' it would be on the outside.  The top and bottom rows are 'unstyled' and the center row is styled.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Table Padding</title>
<style type="text/css">
<!-- 
.class1{
padding-left:5px;
padding-right:5px;
}
.class2{
padding-left:10px;
padding-right:20px;
}
.class3{
padding-left:0px;
padding-right:0px;
padding-top:2px;
padding-bottom:2px;
}

-->
</style>
</head>
<body>
<h1>Table Padding</h1>

Then all you do set the class name when you insert the table.

<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>Some text</td><td>More text</td><td>Some more text</td></tr>
<tr><td class="class1">class1</td><td class="class2">class2</td><td class="class3">class3</td></tr>
<tr><td>Some text</td><td>More text</td><td>Some more text</td></tr>
</table>

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now