html表格单元之间距离,HTML / CSS中两个表格单元格之间的边界

4 个答案:

答案 0 :(得分：2)

在td上设置边框会使td和border-collapse: collapse;周围的边框重叠，只是重叠两个边框，它不会删除边框，因此您需要删除两列的边框。

.other td:first-child{

border-right:0;

}

.other td:last-child{

border-left:0;

}

布局1

＆＃13;

＆＃13;

table {

border-collapse: collapse;

}

table,

th,

td {

border: 1px solid black;

}

th,

td {

padding: 5px;

text-align: left;

vertical-align: top;

}

tr.all {

background-color: palegreen;

}

tr.other {

background-color: beige;

}

.other td:first-child{

border-right:0;

}

.other td:last-child{

border:1px solid red;

}＆＃13;

XX
YY	ZZ
AA	BB

＆＃13;＆＃13;＆＃13;

布局2

＆＃13;

＆＃13;

table {

border-collapse: collapse;

}

table,

th,

td {

border: 1px solid black;

}

th,

td {

padding: 5px;

text-align: left;

vertical-align: top;

}

tr.all {

background-color: palegreen;

}

tr.other {

background-color: beige;

}

.other td:first-child{

border-right:0;

}

.other td:last-child{

border-left:0;

}＆＃13;

XX
YY	ZZ
AA	BB

＆＃13;＆＃13;＆＃13;

border-collapse CSS属性决定了表格的边框

分开或折叠。在分离的模型中，相邻的细胞

每个都有自己独特的边界。在折叠模型中，相邻

表格单元格共享边界。

答案 1 :(得分：1)

table { border-collapse: collapse;}

table, th, td { border: 1px solid black;}

th, td {

padding: 5px;

text-align: left; vertical-align: top;

}

tr.all { background-color: palegreen; }

tr.other { background-color: beige; }

td.chain { border-left: 0px; }

td.target { border-left: 0px; }

XX
YY	ZZ
AA	BB

table { border-collapse: collapse;}

table, th, td { border: 1px solid black;}

th, td {

padding: 5px;

text-align: left; vertical-align: top;

}

tr.all { background-color: palegreen; }

tr.other { background-color: beige; }

td.chain { border-color: red; }

td.target { border-color: red; }

XX
YY	ZZ
AA	BB

答案 2 :(得分：1)

哟可以试试，

table { border-collapse: collapse;}

table, th, td { border-left: 1px solid black; border-bottom: 1px solid black;}

th, td {

padding: 5px;

text-align: left; vertical-align: top;

}

tr.all { background-color: palegreen; }

tr.all td { border: 1px solid black; }

tr.other { background-color: beige; }

td.chain { border: 1px solid red; }

td.target { border: 1px solid red; }

答案 3 :(得分：1)

table {

border-collapse: collapse;

}

table,

th,

td {

border: 1px solid black;

}

th,

td {

padding: 5px;

text-align: left;

vertical-align: top;

}

tr.all {

background-color: palegreen;

}

tr.other {

background-color: beige;

}

td.chain {

border: 1px solid red;

}

td.target {

}

.other>td:first-child{

border-right: 1px solid red;

}

.other>td:last-child{

border: 1px solid red;

}

XX
YY	ZZ
AA	BB

XX
YY	ZZ
AA	BB

table {

border-collapse: collapse;

}

table,

th,

td {

border: 1px solid black;

}

th,

td {

padding: 5px;

text-align: left;

vertical-align: top;

}

tr.all {

background-color: palegreen;

}

tr.other {

background-color: beige;

}

.other>td:not(.target) {

border: none;

}

.target{

border-left:none;

border-bottom:none;

}