Question

我正在重写现有的servlet以使其看起来更好。表格非常复杂，我认为如果两个单元格之间没有边框，它会更好看。我没有定义这样的CSS规则。然后我试着改变细胞边框颜色。我又失败了。可能存在一些我无法处理的CSS规则优先级问题。

这是我在当前Chrome上获得的以及我想要实现的目标：

<html>
<head><style>
    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 { border-left: none; }
</style></head>
<body>
    <table class='rule'>
    <tr class="all"><td>XX</td></tr>
    <tr class="other">
        <td>YY</td>
        <td class='target'>ZZ</td></tr>
    <tr class="other">
        <td>AA</td>
        <td class='chain'>BB</td>
    </tr>
    </table>
</body>
</html>

Answer 1

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

.other td:first-child{
  border-right:0;
}
.other td:last-child{
  border-left:0;
}

布局1

＆＃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;

<table class='rule'>
  <tr class="all">
    <td>XX</td>
  </tr>
  <tr class="other">
    <td>YY</td>
    <td class='target'>ZZ</td>
  </tr>
  <tr class="other">
    <td>AA</td>
    <td class='chain'>BB</td>
  </tr>
</table>

＆＃13;

布局2

＆＃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;

<table class='rule'>
  <tr class="all">
    <td>XX</td>
  </tr>
  <tr class="other">
    <td>YY</td>
    <td class='target'>ZZ</td>
  </tr>
  <tr class="other">
    <td>AA</td>
    <td class='chain'>BB</td>
  </tr>
</table>

＆＃13;

border-collapse CSS属性决定了表格的边框分开或折叠。在分离的模型中，相邻的细胞每个都有自己独特的边界。在折叠模型中，相邻表格单元格共享边界。

<强> MDN

Answer 2

哟可以试试，

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

Answer 3

Expected result 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;
}
<table class='rule'>
  <tr class="all">
    <td>XX</td>
  </tr>
  <tr class="other">
    <td>YY</td>
    <td class='target'>ZZ</td>
  </tr>
  <tr class="other">
    <td>AA</td>
    <td class='chain'>BB</td>
  </tr>
</table>

Expected result 2

<table class='rule'>
  <tr class="all">
    <td>XX</td>
  </tr>
  <tr class="other">
    <td>YY</td>
    <td class='target'>ZZ</td>
  </tr>
  <tr class="other">
    <td>AA</td>
    <td class='chain'>BB</td>
  </tr>
</table>
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;
  }

Answer 4

变体＃1：https://jsfiddle.net/a7p2dp3o/

<style>
  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; }
</style>

<table class="rule">
  <tbody><tr class="all"><td>XX</td></tr>
   <tr class="other">
      <td style="border-right: 0px;">YY</td>
      <td class="target">ZZ</td></tr>
   <tr class="other">
      <td style="border-right: 0px;">AA</td>
      <td class="chain">BB</td>
   </tr>
  </tbody>
</table>

变体＃2：https://jsfiddle.net/3u2cno6f/1/

<style>
  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;  }
</style>

<table class="rule">
  <tbody><tr class="all"><td>XX</td></tr>
   <tr class="other">
      <td style="border-right: 0px;">YY</td>
      <td class="target">ZZ</td></tr>
   <tr class="other">
      <td style="border-right: 0px;">AA</td>
      <td class="chain">BB</td>
   </tr>
</tbody>
</table>

HTML / CSS中两个表格单元格之间的边界

4 个答案: