如何在表边界之间包含间隙

Question

我创建了一个网页，需要并排显示三张表。但我不知道如何在表边界之间包含间隙/空格？现在，它正在触及彼此的边界。

我已经尝试了以下代码。https://jsfiddle.net/14ayr783/

table,th,td {
border:5px solid crimson;
}
table {
float:left;
width:33%;
border-collapse:collapse;
}

Answer 1

如果我理解正确，您应该删除border-collapse: collapse，因为它将相邻边界合并为单个边界。同时添加<table cellspacing="5">

Answer 2

如果需要表之间的空间，请在表上使用margin-right: 10px;。

如果您希望表中的单元格之间有空间，请使用maciejze的建议。

Answer 3

使用Flexbox容器并从表中删除float

.container {
display: flex;
justify-content: space-between;
}
table {
flex-basis: 33%;
border-collapse:collapse;
}

Js出价叉：https://jsfiddle.net/yx5eL6bf/

Answer 4

尝试添加此css

table {
float:left;
width:32%;
border-collapse:collapse;
margin:3px;
}