代码之家 › 专栏 › 技术社区 › Ousama

在html表格中显示行而不是空单元格

bootstrap-4 css html

Ousama · 技术社区 · 4 年前

我需要在html表的空单元格中显示类似下图的内容(我使用的是bootstrap4.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>

预期结果:

先谢谢你。

2 回复 | 直到 4 年前

Temani Afif 4 年前

使用渐变背景与 :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>

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>
<车身>

<table class=“table bordered”>
<td>彼得</td>
<td>格里芬</td>
</tr>
<tr>
<td>意向书</td>
</tr>

</body>
</html>

Lalji Tadhani 4 年前

: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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前