html中如何使图片填充表格,html-如何在CSS中指定表格填充？ （表，而不是单元格填充）...

html-如何在CSS中指定表格填充？ (表，而不是单元格填充)

我有一个带有彩色背景的表格，我需要指定表格及其内容之间的填充，即 细胞。

table标记似乎不接受填充值。

Firebug用填充0显示表和主体的布局，但不接受为它们输入的任何值，因此我想它们只是没有padding属性。

但问题是，我希望单元格之间的间距要与顶部的顶部单元格和底部的底部单元格相同。

同样，我要的不是单元格填充。

编辑：谢谢，我现在真正需要的是边框间距，或其html等效的cellpacing。

但是由于某些原因，他们在我正在工作的网站上没有做任何事情。

两者都可以在单独的HTML上很好地工作，但是在网站上却不能。

我以为可能是某种样式覆盖该属性，但是不应该覆盖cellpacing和内联边框间距，对吗？

(我使用firefox)

编辑2：不，TD填充不是我所需要的。 使用TD填充，可以将相邻单元格的顶部和底部填充总和，因此两个单元格之间的空间(实际上是填充)比顶部单元格和桌面边框之间的空间大一倍。 我希望它们之间的距离完全相同。

12个解决方案

43 votes

最简单/最佳的支持方法是使用

table.foobar {

border: solid black 1px;

border-spacing: 10px;

}

table.foobar td {

border: solid black 1px;

}

foo

bar

CSS方式：边框间距(我不认为IE不支持)

table.foobar {

border: solid black 1px;

border-spacing: 10px;

}

table.foobar td {

border: solid black 1px;

}

foo

bar

编辑：如果您只想填充单元格内容，而不要间隔它们，则可以简单地使用

要么

td {

padding: 10px;

}

Rob answered 2019-11-04T16:08:37Z

25 votes

您可以为表格设置边距。 或者，将表格包装在div中并使用div的填充。

Frank Schwieterman answered 2019-11-04T16:09:06Z

24 votes

关于表，这是您应该了解的东西……它们不是嵌套的独立元素的树。 它们是单个复合元素。 尽管单个TD的行为或多或少类似于CSS块元素，但是中间的东西(TABLE和TD之间的任何东西，包括TR和TBODY)都是不可分割的，并且既不属于内联也不属于块。 该三维空间中不允许使用随机HTML元素，并且此类三维空间的大小根本无法通过CSS进行配置。 甚至只能使用HTML cellspacing属性，而该属性在CSS中没有类似物。

因此，要解决您的问题，我建议要么像另一个海报所建议的那样使用DIV包装器，要么如果您绝对必须将其包含在表中，那么您会遇到这个丑陋的垃圾：

.padded tr.first td { padding-top:10px; }

.padded tr.last td { padding-bottom:10px; }

.padded td.first { padding-left:10px; }

.padded td.last { padding-right:10px; }

a	b	c
d	e	f
g	h	i

jpsimons answered 2019-11-04T16:09:39Z

6 votes

您不能...也许，如果您发布了所需效果的图片，则还有另一种方法可以实现它。

例如，您可以将整个表包装在DIV中，并将填充设置为div。

Seb answered 2019-11-04T16:10:10Z

5 votes

有趣的是，我昨天正是在这样做。 您只需要在css文件中

.ablock table td {

padding:5px;

}

然后将表格包装在合适的div中

Cruachan answered 2019-11-04T16:10:43Z 2 votes 使用css，表可以独立于其单元格进行填充。 padding属性不由其子级继承。 因此，定义： table { padding: 5px; } 应该管用。 您还可以专门告诉浏览器如何填充(或在这种情况下，不填充)您的单元格。 td { padding: 0px; } 编辑：IE8不支持。 抱歉。 MPelletier answered 2019-11-04T16:11:55Z 2 votes 还有另一个技巧： /* Padding on the sides of the table */ table th:first-child, .list td:first-child { padding-left: 28px; } table th:last-child, .list td:last-child { padding-right: 28px; } (刚刚在我目前的工作中看到了) Offirmo answered 2019-11-04T16:12:31Z 1 votes 您可以尝试border-spacing属性。 那应该做你想要的。 但是您可能希望看到这个答案。 Vincent Ramdhanie answered 2019-11-04T16:12:55Z 1 votes CSS确实不允许您在表级别执行此操作。 通常，当我想实现此效果时，我指定cellspacing="3"。 显然，这不是一个CSS解决方案，所以请考虑它的价值。 localshred answered 2019-11-04T16:13:26Z 0 votes table { border: 1px solid transparent; } 0 votes table { background: #fff; box-shadow: 0 0 0 10px #fff; margin: 10px; width: calc(100% - 20px); } Rufina answered 2019-11-04T16:14:10Z 0 votes table.foobar { padding:30px; /* if border is not collapsed */ } or table.foobar { border-spacing:0; } table.foobar>tbody { display:table; border-spacing:0; /* or other preferred */ border:30px solid transparent; /* 30px is the "padding" */ } 适用于Firefox，Chrome，IE11，Edge。 18C answered 2019-11-04T16:14:35Z