css - 样式化数字以齐平显示在 HTML 表格的右下角

Question

下面的代码与 HTML 表格相呼应。表格的右下角显示数字 $row["points"]。我喜欢它的显示方式，但在表格的右边框和数字 $row["points"] 之间有一条浅蓝色 (#CAE1FF)。我怎样才能让数字与右边框齐平(这样数字和边框之间就没有淡蓝色了)？

截图如下:

提前致谢

约翰

代码:

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;


}

Answer 1

这解决了问题:

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


}