html - 使表格大小适合内部图像、CSS

Question

我正在尝试制作一个 2x5 表格，其中一张大图像占据了最左边的五个单元格，5 个链接占据了最右边的单元格。我无法根据图像调整表格。

我希望表格最后是一个矩形，但目前表格比其中的图像大。另外，有没有办法只使用 CSS(没有 JS)来做到这一点？

提前谢谢你。

这是 jsfiddle:https://jsfiddle.net/3ktLpcmx/2/

和代码:

HTML:

<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td rowspan="5"><img style="display: block;" src="http://wallpapercave.com/wp/ckdySrm.png" width="500" /></td>
<td class="linktd"><a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">Mmmmmhmmm</a></td>
</tr>
<tr>
<td class="linktd"><a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">hmmmhhhhhmmm</a></td>
</tr>
<tr>
<td class="linktd" ><a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">MMMM MMMM!</a></td>
</tr>
<tr>
 <td class="linktd"><a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">mmmmmmm hm mmmmm</a></td>
</tr>
<tr>
<td class="linktd"><a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">Hmmm, mmmhmmmm</a></td>
</tr>
</table>

CSS:

body {
 text-align: center;
 }

.linktd {
 background-color: #58809d;
 text-align:center;
 vertical-align:middle;
 width: 165px;
 height:20%;
 }

.linktd:hover {
 background-color: #282969;
 }

.homelink {
 /*margin-bottom: 10px;*/
 padding: 15px 10px 10px 10px;
 width: 165px;
 height:100%;
 display:inline-block;
 background-color:#58809d;
 color:#FFFFFF;
 font-weight:bold;
 text-decoration:none;
 }

.homelink:hover {
 background-color:#282969;
 }

编辑:

我尝试过的方法包括删除链接上的填充、将表格高度设置为自动(这样链接就不会填充它们的单元格)、将表格设置为 375 像素(图像大小)、将表格设置为 376 像素以及设置链接-tds 到表的 20%。

Answer 1

我认为这里不需要表。 nav 可以用作菜单。

display:flex 将有助于调整大小、对齐、增长和居中。

nav,
nav span,
nav span a {
  display: flex;
}
nav span {
  flex-flow: column;
}
a {
  flex: 1;
  width: 165px;
  justify-content: center;
  align-items: center;
  background-color: #58809d;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  background-color: #282969;
}
nav img {
  display: block;
}

<nav>
  <img src="http://wallpapercave.com/wp/ckdySrm.png" width="500" />
  <span>
    <a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">Mmmmmhmmm</a>
    <a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">hmmmhhhhhmmm</a>
    <a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">MMMM MMMM!</a>
    <a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">mmmmmmm hm mmmmm</a>
    <a href="https://www.youtube.com/watch?v=WUhOnX8qt3I" class="homelink">Hmmm, mmmhmmmm</a>
  </span>
</nav>