0

我需要在 html 表格的空单元格中显示类似下图的内容（我使用的是 Bootstrap 4.3.1）

在此处输入图像描述

源代码：

<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

预期结果：

在此处输入图像描述

先感谢您。

4

2 回答 2

3

使用渐变背景结合:empty

td:empty {
  background:repeating-linear-gradient(-45deg, transparent 0 3px,#000 0 6px);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

如果您想要更好的渲染，请使用 SVG。

td:empty {
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 2 3"><line x1="0" y1="5" x2="4" y2="-1" stroke="black"></line><line x1="2" y1="5" x2="6" y2="-1" stroke="black"></line></svg>') 0 0/8px 12px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

于 2020-12-30T12:17:00.520 回答
1

您可以使用:empty

td:empty{
  background:red;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Lois</td>
  </tr>
</table>

</body>
</html>

于 2020-12-30T12:16:20.850 回答