Question

如何将这两个表彼此相邻添加，并在它们之间留一个空格。使用下面的代码，他们是对的。但他们需要在彼此之间留出空间。这是否可能，任何人都无法帮助我。

<style type="text/css">
    .tftable {
        font-size:       12px;
        color:           #333333;
        width:           100%;
        border-width:    1px;
        border-color:    #729ea5;
        border-collapse: collapse;
    }

    .tftable th {
        font-size:        12px;
        background-color: #acc8cc;
        border-width:     1px;
        padding:          8px;
        border-style:     solid;
        border-color:     #729ea5;
        text-align:       left;
    }

    .tftable tr {
        background-color: #d4e3e5;
    }

    .tftable td {
        font-size:    12px;
        border-width: 1px;
        padding:      8px;
        border-style: solid;
        border-color: #729ea5;
    }

    .tftable tr:hover {
        background-color: #ffffff;
    }
</style>

<table class="tftable" border="1">
    <tr><th>Header 1</th></tr>
    <tr><td>Row:1 Cell:1</td></tr>
    <tr><td>Row:2 Cell:1</td></tr>
    <tr><td>Row:3 Cell:1</td></tr>
    <tr><td>Row:4 Cell:1</td></tr>
    <tr><td>Row:5 Cell:1</td></tr>
    <tr><td>Row:6 Cell:1</td></tr>
    <table class="tftable" border="1">
        <tr><th>Header 1</th></tr>
        <tr><td>Row:1 Cell:1</td></tr>
        <tr><td>Row:2 Cell:1</td></tr>
        <tr><td>Row:3 Cell:1</td></tr>
        <tr><td>Row:4 Cell:1</td></tr>
        <tr><td>Row:5 Cell:1</td></tr>
        <tr><td>Row:6 Cell:1</td></tr>
    </table>
</table>

是否也可以在标题中添加一个中断，因为我尝试了这个：

<tr><th><br />Header 1</th></tr>

但这不起作用？

Answer 1

我为你创建了一个演示小提琴，错误是你正在编写错误的表。这是正确的代码：

<table class="tftable" border="1">
<tr><th>Header 1</th></tr>
<tr><td>Row:1 Cell:1</td></tr>
<tr><td>Row:2 Cell:1</td></tr>
<tr><td>Row:3 Cell:1</td></tr>
<tr><td>Row:4 Cell:1</td></tr>
<tr><td>Row:5 Cell:1</td></tr>
<tr><td>Row:6 Cell:1</td></tr></table>

<table class="tftable" border="1">
<tr><th>Header 1</th></tr>
<tr><td>Row:1 Cell:1</td></tr>
<tr><td>Row:2 Cell:1</td></tr>
<tr><td>Row:3 Cell:1</td></tr>
<tr><td>Row:4 Cell:1</td></tr>
<tr><td>Row:5 Cell:1</td></tr>
<tr><td>Row:6 Cell:1</td></tr>
   </table>

看一下这个DEMO

https://jsfiddle.net/wgrLfxg3/6/

Answer 2

这个怎么样。

.tftable {
 float: left;
 margin-right: 5%;
 width:45%;
}

创建两个表之间的空格

2 个答案: