Solved

Table padding

Posted on 2011-03-20
4
220 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 82

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 82

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

757 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

18 Experts available now in Live!

Get 1:1 Help Now