Question

以前我使用下面的css来隐藏相邻的td它对colspan =“2”工作正常，但是我需要为colspan =“3”工作。

我需要在css或td中添加任何内容吗？

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th, td {
        border: 1px solid black;
    }
    td[colspan="3"]+td{
      display: none;
    }

    </style>
    </head>
    <body>

    <table>
      <tr>
        <th>Month</th>
        <th>Savings1</th>
         <th>Savings2</th>
         <th>Savings3</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$100</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$100</td>
        <td>$100</td>
      </tr>
      <tr>
        <td colspan="3">Sum: $180</td>
         <td>$80</td>

        <td >$110</td>
        <td>$100</td>
      </tr>
    </table>

    </body>
    </html>

Answer 1

你需要隐藏两个td，所以使用这个

 td[colspan="3"]+td{
          display: none;
        }
            td[colspan="3"]+td+td{
          display: none;
        }

table, th, td {
        border: 1px solid black;
    }
    td[colspan="3"]+td{
      display: none;
    }
        td[colspan="3"]+td+td{
      display: none;
    }

<table>
      <tr>
        <th>Month</th>
        <th>Savings1</th>
         <th>Savings2</th>
         <th>Savings3</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
        <td>$100</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
        <td>$100</td>
        <td>$100</td>
      </tr>
      <tr>
        <td colspan="3">Sum: $180</td>
         <td>$80</td>

        <td >$110</td>
        <td>$100</td>
      </tr>
    </table>

超过一圈与colspan =“3”

1 个答案: