Solved

Table padding

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
key press alert 2 32
Do alert on select 6 15
How to create a table with buttons 3 23
Opening a new tab in IE using Powershell / HTML 2 21
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

820 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