只有内部的Css表天沟

Question

我尝试在单元格之间创建一个空格但没有外边空间用于边框处的单元格，我做了一个简单的代码来显示我的问题：

＆＃13;

＆＃13;

html, body, div,
table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


.whatiwant {
  width: 80px;
  height: 110px;
  border: 1px solid blue;
  position:absolute;
  left: 10px;
  top: 10px;
}

table {
  border: 1px solid red;
  border-spacing: 10px;
  border-collapse: separate;
}
td{
  width: 20px;
  height: 20px;
  background-color: #000;
}

＆＃13;

<div class="whatiwant"></div>

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我想要一个像蓝色边框的桌子，有人知道如何用css制作吗？

Answer 1

你可以这样做：

* {margin: 0; padding: 0;}
table {
  border-spacing: 10px;
  border-collapse: separate;
  margin: -10px;
}
td{
  width: 20px;
  height: 20px;
  background-color: #000;
}
.wrapper {
  border: 1px solid red;
  display: inline-block;
}

<div class="wrapper">
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>

Answer 2

您可以使用border-bottom和border-right并使用上一个孩子排除特定td：

＆＃13;

＆＃13;

html,
body,
div,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  table-layout: fixed;
  border-spacing: inherit;
  vertical-align: baseline;
}


table {
  border: 1px solid red;
  border-collapse: separate;
}
td {
  width: 20px;
  height: 20px;
  background-color: #000;
  padding: 1px;
  border-right: solid 10px #fff;
  border-bottom: solid 10px #fff;
}
td:last-child {
  border-right: solid 0px #fff;
}
tr:last-child td {
  border-bottom: solid 0px #fff;
}

＆＃13;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;