如何将CSS按钮放入表格单元格？

Question

我想把CSS按钮放到几个表中.理想情况下,每个按钮应填充相应的表格单元格.这提出了一个问题,因为如果我在CSS中硬编码按钮宽度,我需要为每个表维度单独的一个类.

有没有办法让按钮适合表格单元格？

HTML:

<center>

 <table border="1" width="90%" class="buttons">
<tr>
<td width="25%"><a href="http://www.google.com">Link1 goes here</a></td>
<td width="25%"><a href="http://www.google.com">Link2<br>goes<br>here</a></td>
<td width="25%"><a href="http://www.google.com">Link3<br>goes<br>here</a></td>
<td width="25%"><a href="http://www.google.com">Link4<br>goes<br>here</a></td>
</tr>
</table> 

<p>

<table border="1" width="90%" class="buttons">
<tr>
<td width="20%"><a href="http://www.google.com">Link1 goes here</a></td>
<td width="20%"><a href="http://www.google.com">Link2<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link3<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link4<br>goes<br>here</a></td>
<td width="20%"><a href="http://www.google.com">Link5<br>goes<br>here</a></td>
  </table>

</center>

CSS:

.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;

}

.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}

.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}

玩代码:http: //codepen.io/anon/pen/bIEtC

Answer 1

您应该尝试将高度和宽度设置为100%.像这样:

.buttons a
{
   display: inline-block;
   width: 100%;       /* set to 100% */
   height: 100%;      /* set to 100% */
   margin-bottom: 0.5em;
   padding-top: .6em;
   padding-bottom: .6em;
   color: #fff;
   background-color: #aaabbb;
   border-radius: 5px;
   border: solid #cccccc 1px;
   box-shadow: 2px 2px 1px #888888;
   clear:right;
   float:right;
}