Question

This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:

http://jsfiddle.net/Rochefort/kvUKG/

And also included here:

 <table style="background:#fff;width:300px;margin-left:14px;" class="form"> 
    <tbody>
       <tr style=""> 
          <td class="bosluk"></td> 
          <td class="alis_baslik"><strong>ALIŞ</strong></td> 
          <td class="satis_baslik"><strong>SATIŞ</strong></td> 
       </tr> 
       <tr style="border-bottom:1px solid #e4e4e4;"> 
          <td class="ikonlar"><strong>$ </strong></td> 
          <td class="kurlar">DOLAR</td> 
          <td class="alis">2.2804</td> 
          <td class="satis">2.2914</td> 
       </tr> 
       <tr style="border-bottom:1px solid #e4e4e4;"> 
          <td class="ikonlar"><strong>$ </strong></td> 
          <td class="kurlar"><strong>DOLAR</strong></td> 
          <td class="alis">2.2804</td> 
          <td class="satis">2.2914</td> 
       </tr> 
       <tr style="border-bottom:1px solid #e4e4e4;"> 
          <td class="ikonlar"><strong>$ </strong></td> 
          <td class="kurlar"><strong>DOLAR</strong></td> 
          <td class="alis">2.2804</td> 
          <td class="satis">2.2914</td> 
       </tr> 
       <tr style="border-bottom:1px solid #e4e4e4;"> 
          <td class="ikonlar"><strong>$ </strong></td> 
          <td class="kurlar"><strong>DOLAR</strong></td> 
          <td class="alis">2.2804</td> 
          <td class="satis">2.2914</td> 
       </tr> 
    </tbody>
 </table>

I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?

Answer 1

You can use text-align: right with padding-right instead of padding-left.

Example: http://jsfiddle.net/BfD2v/

.ikonlar {
    padding-right:5px;
    font-family: Arial;
    font-size:12px;
    font-weigth: bold;
    color: #000;
    text-align: right;
}

If you want to make the whole column narrower, you can set the width od the column with this:

.bosluk, .ikonlar {
    width: 10px;
}