Question

是否可以使用CSS组合来自不同表格的单元格？

div {
    width:35px;
}
td {
    border:1px solid #ccc;
    display:inline-block;
}

<div>
<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>
</div>

http://jsfiddle.net/m2rwatob/3/

我需要删除这些空白区域 http://i.imgur.com/fLfZ1Sn.png

Answer 1

您无需合并表格。可以使用以下CSS样式删除表之间的空白区域

table {
   border-spacing: 0px;
}

Answer 2

在table元素中使用cellspacing="0"不需要更好的css。

<div>
<table cellspacing="0">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<table cellspacing="0">
    <tbody>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>
</div>

Answer 3

这是不可能的。您可以做的最多是通过设置tr {display:inline;}

来组合不同行的单元格

请参阅更新的小提琴：http://jsfiddle.net/m2rwatob/5/

Answer 4

您可以通过以下方式删除空白区域：

＆＃13;

div {
    width:35px;
}
td {
    border:1px solid #ccc;
    display:inline-block;
}

＆＃13;

<div>
<table cellspacing="0">
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
    </tbody>
</table>

<table cellspacing="0">
    <tbody>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
    </tbody>
</table>
</div>

＆＃13;

希望它有所帮助。

合并来自不同表的表格单元格

4 个答案: