Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

HTML - CSS Padding For Single TD Inside A Table - Stack Overflow

Uploaded by

filmazy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML - CSS Padding For Single TD Inside A Table - Stack Overflow

Uploaded by

filmazy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

6/11/24, 6:45 PM html - CSS padding for single TD inside a table - Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

CSS padding for single TD inside a table


Asked 12 years, 4 months ago Modified 7 years, 7 months ago Viewed 54k times

I have a table, constructed like this:

6 <table>
<tr> <td>1</td> <td>2</td> <td rowspan="4">3</td></tr>
<tr> <td>4</td> <td>5</td> </tr>
<tr> <td>6</td> <td>7</td> </tr>
<tr> <td>8</td> <td>9</td> </tr>
<tr height="100"><td colspan="2">10</td><td class="eleven">11</td> </tr>
</table>

Now the problem is within the last row. Whole row has a height set to 100px, so there is a plenty
of room in TDs. In the very last TD I want to set an individual padding, so only the content "11" is
padded from the top:

.eleven {
padding-top:15px;
}

Setting this causes the problem - the first TD in this row also gets padding-top:10px; Why and
how to make only the 2nd one padded?

html html-table padding

Share Improve this question Follow edited Oct 26, 2016 at 14:36 asked Feb 9, 2012 at 9:10
Brian Tompsett - 汤莱恩 wiktus239
5,837 72 60 132 1,400 2 15 29

2 your code seems to be working jsfiddle.net/rdQvZ. what is the problem?? – Sunil Kumar B M Feb 9, 2012 at
9:17

you might want to check back your css,your other css codes .the table and the .eleven css is ok – XepterX
Feb 9, 2012 at 9:17

You should create a jsFiddle illustrating your problem. Maybe also specify which browser you are
experiencing these problems in? – kapa Feb 9, 2012 at 21:36

https://stackoverflow.com/questions/9207996/css-padding-for-single-td-inside-a-table?rq=3 1/2
6/11/24, 6:45 PM html - CSS padding for single TD inside a table - Stack Overflow

2 Answers Sorted by: Highest score (default)

Why don't you wrap the content you want to be padded into a <div> (onto which you will be
applying the padding style) and put that <div> into the <td> ?
10
<td>
<div style="padding-top: 15px;">
Content
</div>
</td>

Share Improve this answer Follow answered Feb 9, 2012 at 9:38


Navneeth G
7,265 1 16 18

3 Because you don't place extra divs where you don't need 'em, and definitely you don't apply inline styling
for such divs. – Madara's Ghost Feb 11, 2012 at 19:54

9 You can place div's anywhere you need, its a "division". I just gave the inline styling option to keep things
simple, to show him how it can be done with minimal code. Obviously he knows how to write style classes,
he can figure out how to separate them. Div gives him a lot more flexibility in the future. What if he
switches from a table based design to something else, the Div's can keep him safe. – Navneeth G Feb 12,
2012 at 18:50

Ok, I found out what caused the problem. It was an entry in a little html5-css-reset snippet I use:

7 vertical-align:baseline;

assigned generally to most of common elements. Having that in mind, now everything works as
supposed to.

Share Improve this answer Follow answered Feb 11, 2012 at 19:50
wiktus239
1,400 2 15 29

https://stackoverflow.com/questions/9207996/css-padding-for-single-td-inside-a-table?rq=3 2/2

You might also like