表td边框可见和不可见同一行

时间:2013-05-13 08:41:52

标签: html css html-table visible

我有2个数据表,在表中我要计算3列的数量。这3 td有一个边框,而左边的4和右边的1没有边框。它看起来很好,但是我必须在左边的td(4px)上添加一些像素,这不是我真正想要的。

有关如何执行此操作的建议吗?

enter image description here

代码

HTML

 <table id="Tbl_UriJou_Goukei" class="goukei">
                <tr>
                        <td width="240"></td>
            <td width="55"></td>
            <td width="34"></td> **<!-- 30 + 4 px to align 商品合計 td -->**
            <td align="right" width="80">商品合計:</td>
                        <td align="right" class="sum" width="80">...</td>
            <td align="right" class="sum" width="80">...</td>
            <td align="right" class="sum" width="80">...</td>
            <td width="50"></td>
                </tr>
                </table>

CSS

table.goukei {
    width: auto;
    border: none;
    border-collapse: collapse;
    font-size: 11px;
    line-height: normal;
}

table.goukei td  {
    padding: 5px;
}

table.goukei td.sum  {
    padding: 5px;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC; }

1 个答案:

答案 0 :(得分:0)

您可以<table><td>右侧提供cellspacing="4"作为属性的间距。或者你可以给它填充。

对于示例者:

td.some-class {
   padding : 0 4px 0 0;
}

或者你可以看这里

Add space between two particular <td>s