在HTML表格的右下角显示一个数字以显示齐平

问题描述

| 下面的代码回显HTML表。表格的右下角显示数字“ 0”。我喜欢它的显示方式，但是表格的右边框和数字

$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,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,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,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,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,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;


}

    

解决方法

这样就解决了问题：

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


}