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%;
}

这是所有33.33%的3个表，其中的图像适合中间的一个。

DEMO HERE

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

DEMO HERE

更新

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

DEMO HERE

Answer 2

这是我的想法。像这样：

<style>
  table {
    width: 100%;
    border: 1px #cccccc solid; /* for cells preview */
  }
  td.left, td.right {
    width: 33.33%;
    background-color: #f0f0f0;  /* for cells preview */
  }
  td {
    border: 1px #cccccc solid; /* for cells preview */
    height: 400px;
    padding: 0;
  }
  td.middle {
    text-align: center;
  }
  td.middle img {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<table>
  <tr>
    <td class="left">
      Left cell content
    </td>
    <td class="middle">
      <img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
    </td>
    <td class="right">
      Right cell content
    </td>
  </tr>
</table>

CSS表影响另一个表

2 个答案:

HTML：

CSS：

更新