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

How to fit CSS buttons into table cells?

提问by user1566515

I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.

我想将 CSS 按钮放入多个表格中。理想情况下，每个按钮都应填充相应的表格单元格。这带来了一个问题，因为如果我在 CSS 中对按钮宽度进行硬编码，我将需要为每个表格维度创建一个单独的类。

Is there a way to have the buttons fit into the table cells?

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

HTML:

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:

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

Play with the code: http://codepen.io/anon/pen/bIEtC

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

回答by AmanVirdi

You should try to set height and width 100%. Like this:

您应该尝试将高度和宽度设置为 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;
}

回答by Loren Posen

Try not to hard code CSS into the HTML... it leads to a mess of trouble!

尽量不要将 CSS 硬编码到 HTML 中……它会导致一团糟！

Taking the inline styling out of the html seems to fix most problems. Then, just like @ArmanVirdi said, add the width and the height of the link to be 100%.

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

The <center>tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p>tag.

该<center>标签似乎并没有做任何事情，所以这些都是在下面的HTML删除，以及一个未关闭<p>标签。

HTML

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

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

JSFiddle 供参考

回答by Usagi Ito

Add to .buttons:

添加到.buttons：

width:0;

Resut:

结果：