javascript - CSS 表影响另一个表

Question

我有这个 CSS 表代码:

 .navgroups table#rightTable {
     float: right;
     width: 33%;
 }
 .navgroups table#leftTable {
     float: left;
     width: 33%;
 }
 .nvagroups td#centerTable {
     margin: auto;
 }

在中间的表中，我想插入一个图像，但问题比 33%(图像大小)还要大。中间表格中的每个字母都会降低左侧表格的栏位。

我尝试了 display:inline 和 display:inline-block。

Answer 1

我只是把这个作为答案，我认为根据您提供的信息，没有人能比这个做得更好。

HTML:

<table class="rightTable">
    <tr>
        <td></td>
    </tr>
</table>
<table class="leftTable">
    <tr>
        <td></td>
    </tr>
</table>
<table class="centerTable">
    <tr>
        <td>
            <img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
        </td>
    </tr>
</table>

CSS:

.rightTable {
    float: right;
    width: 33%;
}
.leftTable {
    float: left;
    width: 33%;
}
.centerTable {
    margin: auto;
    width: 33%;
}
table {
    outline: 1px solid;
}
img {
    width: 100%;
}

这是 3 个表格，全部 33.33% 且图像适合中心表格。

DEMO HERE

在下面的演示中，我们在其他表中有文本。工作正常。

DEMO HERE

<小时/>

更新:

使用 1 个表而不是 3 个表的演示。

DEMO HERE