Question

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

还包括在这里：

 <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: right使用padding-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>

html表上的空格

2 个答案: