Solved

Table padding

Posted on 2011-03-20
4
222 Views
Last Modified: 2012-05-11
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
Comment
Question by:darkbluegr
  • 2
4 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35176674
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35176733
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
 
LVL 20

Accepted Solution

by:
Mark Brady earned 250 total points
ID: 35177399
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35177475
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now