Question

urlpatterns = [
path('', PostListView.as_view(), name='post-home'),
other_paths()
]

table {
  border-collapse: collapse;
}

table td {
  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');
}

#main {
  width: 200px;
  margin: auto;
  border: 1px solid red;
}

我有一个简单的表格，其中TD的背景图片位于居中的div中。当我用鼠标（Chrome，Opera）调整浏览器窗口的宽度时，TD之间会出现空白。

我该如何解决？

示例：http://jsfiddle.net/gauh9s7t/

视频：https://www.youtube.com/watch?v=V4h5bEOS3jE

Answer 1

不是错误，它与您的背景图片有关：

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

如果将此属性替换为背景色，则表中的每个td都可以。

Answer 2

您可以通过添加 background-repeat 属性来对其进行修复：

table td {
  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');
  background-repeat: no-repeat;
}

http://jsfiddle.net/gauh9s7t/10/

调整浏览器大小时带有背景图片的HTML表格错误

2 个答案: