HTML表格单元格间距 - 仅在单元格之间，不包含外部单元格 [英] HTML table cell spacing - only between cells, no outer one

问题描述

我想在没有外部空格的单元格之间添加空格。

我的问题是， cellspacing html属性和 border-spacing CSS属性增加了间距外面也是。

我想把单元格间距放在没有红色（外部）部分的位置 - 只有黄色的部分。

是否有可能？

编辑：

1. 图像是手工绘制的（MS-Paint），仅用于说明。 $ b

我找到了一个迂回解决方案，其中包括一些额外的 div -s：

<背景颜色：黄色; border：2px solid black;}。inner-spacing td {padding：0;}。inner-spacing td> div {width：60px;身高：60px;背景颜色：绿色;边框：2px纯黑色; margin：10px;}。inner-spacing tr：first-child> td> div {margin-top：0px;}。inner-spacing tr：last-child> td> div {margin-bottom：0px;}。inner-spacing tr> td：第一胎> div {margin-left：0px;}。inner-spacing tr> td：last-child> div {margin-right：0px;}

< table类=内间距> < TR> < TD> < DIV /> < / TD> < TD> < DIV /> < / TD> < / TR> < TR> < TD> < DIV /> < / TD> < TD> < DIV /> < / TD> < / tr>< / table>

所以总结一下，我希望桌子边框间距与表格边框合拢到单元格上（没有间距）。

我想知道是否有一些其他解决方案 - 所以任何新的解决方案是值得欢迎的！ 解决方案

这将有点棘手...您需要设置 display：block 和 border-spacing：10px 用于单元格之间的间距和相同的负值 margin ：-10px 删除外部空格

Stack Snippet

  table {font：bold 13px Verdana;背景：黑色; margin：30px auto; border-spacing：0;} table td {padding：30px;背景：红色;颜色：#fff;} table tbody {margin：-10px;显示：块; border-spacing：10px;}  

< table> < TR> < TD→1< / TD> < TD> 2'; / TD> < / TR> < TR> < TD> 3'; / TD> < TD> 4℃; / TD> < / table>

I am trying to add cell spacing to a html table.

I want to add spacing between cells without the outer spacing.

My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.

I would like to put cell spacing without the red (outer) part - only the yellow one.

Is it possible?

Edit:

1. The image was drawn by hand (MS-Paint) only for illustration.
2. The coloring is for debugging - so that one can see where the borders, and spacing is.

I have found a roundabout solution including some additional div-s:

.inner-spacing {
  border-collapse: collapse;
  background-color: yellow;
  border: 2px solid black;
}
.inner-spacing td {
  padding: 0;
}
.inner-spacing td > div {
  width: 60px;
  height: 60px;
  background-color: green;
  border: 2px solid black;
  margin: 10px;
}
.inner-spacing tr:first-child > td > div {
  margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
  margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
  margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
  margin-right: 0px;
}

<table class="inner-spacing">
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
</table>

So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).

I wonder if there are some other solutions - so any new solution is welcome!

解决方案

This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing

Stack Snippet

table {
  font: bold 13px Verdana;
  background: black;
  margin: 30px auto;
  border-spacing: 0;
}

table td {
  padding: 30px;
  background: red;
  color: #fff;
}

table tbody {
  margin: -10px;
  display: block;
  border-spacing: 10px;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

这篇关于HTML表格单元格间距 - 仅在单元格之间，不包含外部单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！