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

编辑：

我尝试过的事情包括删除链接上的填充，将表格高度设置为自动（然后链接不填充其单元格），将表格设置为375px（图像大小），将表格设置为376px，以及设置链接-tds到表的20％。

Answer 1

我认为这里不需要table。 nav可以为菜单做。

显示：flex将帮助调整大小，对齐，增长和居中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

J.Joe，你的答案很有效，而且很聪明。谢谢。

<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td class = "test" rowspan="5"></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>

和

body {
           text-align: center;
     }
.test{
    background-color: #cccccc;
  background-image:url('http://wallpapercave.com/wp/ckdySrm.png');
  background-size:cover;

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

将表格大小调整为内部图像，css

2 个答案: