Solved

padding-left in <td>

Posted on 2004-08-04
34
1,547 Views
Last Modified: 2006-11-17
to which elements should i put padding-left ? tbody, table, tr, td ?
currently i use this ugly code in each cell
------------------
<td>&nbsp;&nbsp;"&rs("FieldName")&"</td>
0
Comment
Question by:ill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 6
  • 5
  • +3
34 Comments
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713273
Use This:

<td style="padding-left:VALUE">

Replace value with the required amount of pixels.
Its so simple I tested is just now!
0
 
LVL 12

Author Comment

by:ill
ID: 11713295
i do not want  to place into each cell until i really have to
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713304
<style>
td
{
      padding-left: 15px;
}
</style>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713319
Or if you only want it in certain cells (not every table on your whole page) Put this:

<style>
#padding
{
     padding-left: 15px;
}

<td id="padding">

Nothing is wrong with RozanaZ 's way but if you have other tables, your page will be distorted!
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713320
Although you dont want to put code in every cell, Its the only way, man!
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11713366
Jonny please don't suggest using id's for formatting several elements on the same page. Id's should be unique on a single page, classes were invented for these cases.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713378
Fine, We'll do it your way!

<style>
.padding
{
     padding-left: 15px;
}

<td class="padding">

It still works!
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11713383
What I would like to know is, what are you trying to achieve with this code-snippet:
<td>&nbsp;&nbsp;"&rs("FieldName")&"</td>

Is it only the first table-colum that's being indented, or are do trying to do this to every cell in the table. If the latter, RozanaZ's solution is the obvious.
0
 
LVL 12

Author Comment

by:ill
ID: 11713385
this one work. is it correct way ?
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713390
Depands how do you use it...
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713397
Yes it will still work!
0
 
LVL 12

Author Comment

by:ill
ID: 11713398
@mreuring
it works for whole table now, but i would like to have it different for each column
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713402
Can someone tell me what is wrong with this???

<style>
.padding
{
     padding-left: 15px;
}

<td class="padding">
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 11713410
<HTML>
<HEAD>
<TITLE></TITLE>

<style>
.type1
{
      padding-left: 15px;
}
.type2
{
      padding-left: 5px;
}
</style>

</HEAD>

<BODY>
<table border="1">
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>
      <tr>
            <td class="type1">s dfs fsdf </td>
            <td class="type2">sdf sdf sdf</td>
      </tr>

</table>
</BODY>
</HTML>
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713412
just so your clear

if you put a style on an element, say a td, as RozanaZ suggested, then it will aply to all the td's where the style is included.

the other ways are pretty much the same.

in-line style as jonnyfb suggested, an a style by calling the style class defined in a similar way to RozanaZ.  (Notice the dot before class name.)

jonnyfb was wrong to suggest that "its the only way" cause RozanaZ's answer will do exactly what your asking.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713414
Why dont you just add a different class to each different cell in a different colum?

It is the only way!!!
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713422
Fine... You obviously have no need for me here...
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713429
while i was typin that a million different answers came in an you changed you mind as to what you wanted.
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713440
So you mean my answer is correct?
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 11713458
tis now, he's changed his mind, yeah
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713465
Great! I finally can get some points!
0
 
LVL 12

Author Comment

by:ill
ID: 11713514
<!--
sorry for my disabbility to ask question.:/
i just wanted to know, where padding-left  should be placed, if i want last column to be padded more than others .
also, i'm increasing points for this debate;)
<html>
<head>
<style>
th{
      background-color: navy;
      color:white;
      border:0;
      }
td{
      text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
      <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
      <tr style='background-color:#ddf0f9'>
            <td>06:00 </td>
            <td>800.00</td>
            <td>10280.00</td>
            <td>1032360.00</td>
            <td>10323160.00</td>
            <td>&nbsp;&nbsp;9743250.00</td>
      </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 72 total points
ID: 11713533
Thanx to IE, using adjescent sibling selectors is out of the question. This would work on most real CSS2 enabled browsers:
table#tab_detail td { //All td's
    padding-left: 3em;
    border: solid #ffffff 0px;
} table#tab_detail td+td { //Any td that's preceded by a td
    padding-left: 2em;
} table#tab_detail td+td+td { //Any td that's preceded by two td's
    padding-left: 5em;
}

But as it is, the suggestion of using classes is the only viable option. However I would like to make a suggestion (based on guesswork)
If you want the first colum to be different from the rest, but the rest should all be the same, I suggest using the th element:
<table id="tab_detail">
    <tr>
        <th>first colum, also known as header-colum</th>
        <td>Some information</td>
        <td>More detailed information</td>
    </tr>
</table>

You could then use for styles:
table#tab_detail th, table#tab_detail td { //All td's and th's
    padding-left: 3em;
    border: solid #ffffff 0px;
} table#tab_detail td { //Overriding the padding for td's
    padding-left: 2em;
}
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713553
<html>
<head>
<style>
colum1{padding-left:10}
colum2{padding-left:10}
colum3{padding-left:10}
colum4{padding-left:10}
colum5{padding-left:10}
colum6{padding-left:50}
th{
     background-color: navy;
     color:white;
     border:0;
     }
td{
     text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}
</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
     <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
     <tr style='background-color:#ddf0f9'>
          <td class="colum1">&>06:00 </td>
          <td class="colum2">&>800.00</td>
          <td class="colum3">&>10280.00</td>
          <td class="colum4">&>1032360.00</td>
          <td class="colum5">&>10323160.00</td>
          <td class="colum6">&nbsp;&nbsp;9743250.00</td>
     </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 8

Accepted Solution

by:
RozanaZ earned 150 total points
ID: 11713557
<html>
<head>
<style>
th{
     background-color: navy;
     color:white;
     border:0;
     }
td{
     text-align:right;
}
table#tab_detail td {
    padding-left: 3em;
    border: solid #ffffff 0px;
}

.type1
{
     padding-left: 15px;
}

</style>
</head>
<body>
<table id='tab_detail' style='spacing:20px;'>
<thead style='font-size:smaller;border:0px none;'>
     <tr><th>Time</th><th>1.&#188;h</th><th>2.&#188;h</th><th>3.&#188;h</th><th>4.&#188;h</th><th>Sum</th></tr>
</thead>
<tbody>
     <tr style='background-color:#ddf0f9'>
          <td>06:00 </td>
          <td>800.00</td>
          <td>10280.00</td>
          <td>1032360.00</td>
          <td>10323160.00</td>
          <td class="type1">9743250.00</td>
     </tr>
</tbody>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713596
ill,

A few comments:

1. RozanaZ has adequately answered your question with that last post.
2. This has no meaning: style='spacing:20px;'
3. jonnyfb - I'm afraid that http:#11713553 is completely invalid CSS :-)
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713615
.colum1{padding-left:10}
.colum2{padding-left:10}
.colum3{padding-left:10}
.colum4{padding-left:10}
.colum5{padding-left:10}
.colum6{padding-left:50}
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713631
jonnyfb,
With all due repsect, what you posted is still invalid :-)
The question has already been adequately answered...
0
 
LVL 1

Expert Comment

by:jonnyfb
ID: 11713642
Why dont we let the AUTHOR OF THE QUESTION DECIDE!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713696
I'm sure they will - but a relative simple question has become a very long thread.
I am merely trying to moderate the thread to make sure that it doesn't get too confusing - it can be very difficult for someone who's new to CSS to make heads or tails of things when the comments come in at the rate that they did here.
0
 
LVL 12

Author Comment

by:ill
ID: 11713701
agree, it's a solution, but one more question.
can ".type1" be changed to add to td padding, not to override  ?
2em(td) +3em ( .type1)

---------------
.type1
{
     padding-left: 3em;
}
this one should be 5 em
<td class="type1">9743250.00</td>  
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11713734
Please don't accept this comment...
No - the class will override what's in the cell. You can't accumulate padding in that way...
0
 
LVL 12

Author Comment

by:ill
ID: 11713877
thanx all.
i'm not css expert, so sorry for my unclear question/comments.
there is a problem to choose points for solution in new area, when one don't know how difficult it is.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11714146
Not to worry ill - you only need to ask if you're unsure. The experts here will always help you through.
mreuring, I'm sorry, I missed your post too - fortunately ill did not.
(...adjascent sibling selectors - I just love that term...)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 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