HTMLrowspan与css元素冲突

html5 • • 问答

我想我的代码会不言自明。

<!DOCTYPE HTML>
<html>

<head>
  <title>&nbsp;</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
     :root {
      --color1: #c83349;
      --color2: #fff;
    }
    
    table {
      border-spacing: 0;
      border: 1px solid purple;
      margin: 10px auto;
      text-align: center;
      width: 300px;
      border-bottom: none;
    }
    
    tr,
    th,
    td {
      width: 100px;
      height: 100px;
    }
    
    th,
    td:not(:nth-child(2)) {
      background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
    }
    
    tr:last-child td {
      border-bottom: 1px solid purple;
    }
    
    td:nth-child(2) {
      border: 1px solid purple;
      border-bottom: none;
    }
  </style>
</head>

<body>

  <table>

    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <td>4</td>
      <td rowspan=2>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>

  </table>

</body>

</html>

回答

使用 rowspan 属性作为选择器而不是 nth-child

* {
  margin: 0;
  padding: 0;
}

:root {
  --color1: #c83349;
  --color2: #fff;
}

table {
  border-spacing: 0;
  border: 1px solid purple;
  margin: 10px auto;
  text-align: center;
  width: 300px;
  border-bottom: none;
}

tr, th, td {
  width: 100px;
  height: 100px;
}

th,
td:not([rowspan]) {
  background: repeating-linear-gradient(45deg, var(--color2) 25% 50%, var(--color1) 50% 75%);
}

tr:last-child td {
  border-bottom: 1px solid purple;
}

td[rowspan] {
  border: 1px solid purple;
  border-bottom: none;
}
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>4</td>
    <td rowspan=2>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

以上是HTMLrowspan与css元素冲突的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容