Question

我希望功能和产品之间的垂直线一直向下。产品1和2以及产品2和3之间相同。

我想要一个水平的功能和功能1和2，一直到产品3。

＆＃13;

<html>

<head>
  <title>11-1</title>
  <style>
    .table {
      ;
      border-collapse: collapse;
      border-spacing: 0;
      border-width: 0;
      border-right: 0;
      border-left: 0;
      border-top: 0;
      border-bottom: ;
      text-align: center;
      width: 100%;
    }
    th {
      border: none;
    }
    tr td {
      border-left: none;
      border-right: none;
    }
  </style>

  <head>

    <body>
      <table class="table" border="1px">
        <tr>
          <th style="background-color:silver;text-align:left ;">Features</th>
          <th style="background-color:silver" ;>Product 1</th>
          <th style="background-color:silver" ;>Product 2</th>
          <th style="background-color:silver" ;>Product 3</th>
        </tr>
        <tr>
          <td style="text-align:left" ;>Feature 1</td>
          <td>x</td>
          <td></td>
          <td>x</td>

        </tr>
        <tr style="border-right:1" ;>
          <td style="text-align:left" ;>Feature 2</td>
          <td></td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr style="border-bottom:none">
          <td style="text-align:left" ;>Feature 3</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </table>
    </body>

</html>

＆＃13;

Answer 1

根据我的理解，您必须使用:not()和:first/last-of-type来实现您的目标。

＆＃13;

.table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  text-align: center;
  width: 100%;
}
td:not(:last-of-type) {
  border-right: 3px solid red
}
tbody tr:not(:first-of-type) td {
  border-bottom: 3px solid green
}
th {
  border: 0;
  background: silver
}
tr td {
  border: 0
}
tr td:first-of-type,
tr th:first-of-type {
  text-align: left
}

＆＃13;

<table class="table">
  <tr>
    <th>Features</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Feature 1</td>
    <td>x</td>
    <td></td>
    <td>x</td>

  </tr>
  <tr>
    <td>Feature 2</td>
    <td></td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>Feature 3</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
</table>

＆＃13;

在产品3的特征下创建一个带有特征1和2的特征的表格。将特征右侧的垂直线设为与产品1和1相同的特征3。 2

1 个答案: