css 更改长度不均匀表的背景色[重复]

kognpnkq 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(78)

- 此问题在此处已有答案**：

Colspan all columns（12个答案）
18小时前关门了。
给定这段代码（将每隔一行的背景着色为蓝色），如何使它将整行着色，而不仅仅是得到'td'- s的地方（在本例中是Data 1行）？

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    table{
      border: 5px solid;
    }    
    tr:nth-child(even) {background-color: blue;}
    



  </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="mytable">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
        
        
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>

      <tr>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>

      </tr>
    </table>
  </body>
</html>

Image of html

css

来源：https://stackoverflow.com/questions/75145465/changing-background-color-on-uneven-length-table

1条答案

按热度按时间

dgsult0t1#

use:

border-collapse: collapse删除默认表格的单元格间距
colspan（如果需要），以扩展所需单元格
使用<thead>和<tbody>，浏览器会自动插入TBODY，所以要利用它。

table {
  border: 5px solid;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: blue;
}

<table class="mytable">
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">Data 1</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td colspan="2">Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-01-18

我来回答

css 更改长度不均匀表的背景色[重复]

1条答案

相关问题

热门标签

最新问答