設計一個數字以顯示在HTML表底部的右下角Flushing

下面的代碼回顯了一個HTML表格。表格的右下角顯示數字$row["points"]。我喜歡它的顯示方式，但表格的右邊框和編號爲$row["points"]之間的淡藍色（＃CAE1FF）。如何使用右邊界清除數字（因此數字和邊界之間沒有淡藍色）？設計一個數字以顯示在HTML表底部的右下角Flushing

下面是截圖：

enter image description here

由於提前，

約翰

代碼：

echo "<table class=\"samplesrec\">"; 

echo '<tr style="border-left:3px solid #004993; border-right:3px solid #004993; border-top:3px solid #004993;" class="class2a backgroundtt">'; 

echo '<td class="sitename1"></td>'; 

echo '</tr>'; 



echo '<tr class="class2b backgroundtt">'; 




echo '<td style="border-left:3px solid #004993; border-right:3px solid #004993;" class="sitename2name"></td>'; 

echo '</tr>'; 



echo '<tr style="border-left:3px solid #004993; border-right:3px solid #004993; border-bottom:3px solid #004993;" class="class2c backgroundtt">'; 

echo '<td class="sitename2tt"><div class="pointlink">'.number_format($row["points"]).'</div></td>'; 

echo '</tr>';

的CSS：

table.samplesrec { 
    position:absolute; 
    left:30px; 
    top:150px; 
    text-align: left; 
    font-family: "Times New Roman", Times, serif; 
    font-weight: normal; 
    font-size: 18px; 
    color: #000000; 
    width: 580px; 
    table-layout:fixed; 
    background-color: #FFFFFF; 
    border: 0px #FFFFFF; 
    border-collapse: collapse; 
    border-spacing: 0px; 
    padding: 0px; 
    text-decoration: none; 
    vertical-align: text-bottom;  

} 

table.samplesrec td { 
    border: 0px solid #fff; 
    text-align: left; 
    height: 5px; 
    overflow:hidden; 

} 


.class2a 
    { 
    margin-bottom:3px; 
    padding:2px; 
    color:#000000; 
    } 

.class2a a{ 
    padding: 2px; 
    color: #004284; 
    background-color:#CAE1FF; 
    text-decoration: none; 
} 


.class2a a:hover{ 
    background-color: #FF0000; 
    padding: 2px; 
    color: #FFFFFF; 
    text-decoration: none; 
} 


.backgroundtt 
    { 
    position: inherit; 
    width:500px; 
    height:0px; 
    background: #CAE1FF; 
    } 


.sitename1 { width: 580px; 
      font-family: "Courier New", Courier, monospace; 
      font-weight: normal; 
      font-size: 14px; 
      overflow:hidden !important; 
      color: #000000; 
      padding-bottom: 0px; 

} 

.class2b 
    { 
    margin-bottom:3px; 
    padding:2px; 
    color:#000000; 
    } 

.class2b a{ 
    padding: 2px; 
    color: #004284; 
    background-color:#CAE1FF; 
    text-decoration: none; 
} 


.class2b a:hover{ 
    background-color: #FF0000; 
    padding: 2px; 
    color: #FFFFFF; 
    text-decoration: none; 
} 


.sitename2name { width: 300px; 
      overflow:hidden !important; 
      color: #999999; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 5px; 
      padding-bottom: 0px; 

} 

.sitename2name a{ 
      width: 300px; 
      overflow:hidden !important; 
      color: #004284; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: bold; 
      height: 5px; 
      padding-bottom: 0px; 

} 

.sitename2name a:hover{ 
      width: 300px; 
      overflow:hidden !important; 
      color: #004284; 
      background-color: #FFFFFF; 
      text-decoration:underline; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: bold; 
      height: 5px; 
      padding-bottom: 0px; 

} 


.class2c 
    { 
    margin-bottom:0px; 
    padding:2px; 
    padding-bottom: 5px; 
    color:#000000; 
    border-bottom-color:#FFFFFF; 
    border-bottom:thick; 
    } 

.class2c a{ 
    padding: 2px; 
    padding-bottom: 5px; 
    color: #004284; 
    background-color:#CAE1FF; 
    text-decoration: none; 
    border-bottom-color:#FFFFFF; 
    border-bottom:thick; 
} 


.class2c a:hover{ 
    background-color: #FF0000; 
    padding: 2px; 
    padding-bottom: 5px; 
    color: #FFFFFF; 
    text-decoration: none; 
    border-bottom-color:#FFFFFF; 
    border-bottom:thick; 
} 


.sitename2tt { width: 150px; 
      overflow:hidden !important; 
      color: #000000; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 5px; 
      padding-bottom: 0px; 


} 

.sitename2tt a{ 
      width: 50px; 
      overflow:hidden !important; 
      color: #004284; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 5px; 
      padding-bottom: 0px; 


} 

.sitename2tt a:hover{ 
      width: 50px; 
      overflow:hidden !important; 
      color: #004284; 
      text-decoration:underline; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 5px; 
      padding-bottom: 0px; 


} 

.pointlink { 
      float:right; 
      margin-right: 0px; 
      font-size:18px; 
      font-weight:bold; 
      padding-right: 5px; 
      padding-left: 5px; 
      background-color:#004993; 
      color:#FFFFFF; 


} 


.pointlink a{ 
      float:right; 
      margin-right: 0px; 
      font-size:18px; 
      padding: 2px; 
      padding-right: 2px; 
      padding-left: 2px; 
      background-color:#004993; 
      color:#FFFFFF; 


} 

.pointlink a:hover{ 
      float:right; 
      margin-right: 0px; 
      font-size:18px; 
      padding: 2px; 
      padding-right: 2px; 
      padding-left: 2px; 
      background-color: #FF0000; 
      color:#FFFFFF; 


}

來源

2011-05-25 John

我看不到多餘的空間[這裏]（http://jsfiddle.net/AjQbp/1/）。你使用的是什麼瀏覽器？當你將鼠標懸停在其上時，是否出現條子？ – SwDevMan81 2011-05-25 18:20:22

我在所有的瀏覽器上看到它，包括懸停和不懸停。 – John 2011-05-25 18:22:57

這解決了這個問題：

.sitename2tt { width: 150px; 
      overflow:hidden !important; 
      color: #000000; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: normal; 
      height: 5px; 
      padding-bottom: 0px; 
      padding-right: 0px; 


}

來源

2011-05-25 19:35:56 John

設計一個數字以顯示在HTML表底部的右下角Flushing

回答

相關問題