如何将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;
}

Answer 2

尽量不要将CSS硬编码到HTML中......这会导致一堆麻烦！

从html中取出内联样式似乎可以解决大多数问题。然后，就像@ArmanVirdi所说的那样，将链接的宽度和高度添加到100％。

<center>代码似乎没有做任何事情，因此会在以下HTML中删除这些代码，以及未公开的<p>代码。

HTML

<table class="buttons width-25">
        <tr>
            <td><a href="http://www.google.com">Link1 goes here</a>

            </td>
            <td><a href="http://www.google.com">Link2<br>goes<br>here</a>

            </td>
            <td><a href="http://www.google.com">Link3<br>goes<br>here</a>

            </td>
            <td><a href="http://www.google.com">Link4<br>goes<br>here</a>

            </td>
        </tr>
    </table>
    <table class="buttons width-20">
        <tr>
            <td><a href="http://www.google.com">Link1 goes here</a>

            </td>
            <td><a href="http://www.google.com">Link2<br>goes<br>here</a>

            </td>
            <td><a href="http://www.google.com">Link3<br>goes<br>here</a>

            </td>
            <td><a href="http://www.google.com">Link4<br>goes<br>here</a>

            </td>
            <td><a href="http://www.google.com">Link5<br>goes<br>here</a>

            </td>
    </table>

---

CSS

table {
        width: 100%;
    }

    .width-20 td {
        width: 20%;
    }

    .width-25 td {
        width: 25%;
    }

    .buttons {
        text-align: center;
        font-size: 1.0em;
        font-weight: bold;
        line-height: 200%;
    }
    .buttons a {
        display: inline-block;
        height: 100%;
        width: 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;
    }
    .buttons a:active {
        box-shadow: 1px 1px 0px #888888;
    }

JSFiddle for reference

Answer 3

添加到.buttons：

width:0;

Resut：