html - html表格上的空格

Question

这是一个简单的问题，但我似乎无法解决它。我的 html 表可以在下面看到：

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

并且还包括在这里：

 <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>

我实现了 CSS，但该DOLLAR项目有太多空间。我怎样才能删除这个额外的空间？

Answer 1

您可以使用text-align: rightwithpadding-right代替padding-left.

示例：http: //jsfiddle.net/BfD2v/

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

如果要使整列变窄，可以使用以下方法设置列的宽度：

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

Answer 2

您还应该<th>为标题使用标签。<td>然后，这些列将在标签下对齐。像：

<table border="1">
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
 <tr>
  <td>February</td>
  <td>$80</td>
 </tr>
</table>