title: How to fit CSS buttons into table cells?
body: <p>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. </p>
  
  <p>Is there a way to have the buttons fit into the table cells? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;center&gt;
  
   &lt;table border="1" width="90%" class="buttons"&gt;
  &lt;tr&gt;
  &lt;td width="25%"&gt;&lt;a href="http://www.google.com"&gt;Link1 goes here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="25%"&gt;&lt;a href="http://www.google.com"&gt;Link2&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="25%"&gt;&lt;a href="http://www.google.com"&gt;Link3&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="25%"&gt;&lt;a href="http://www.google.com"&gt;Link4&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt; 
  
  &lt;p&gt;
  
  &lt;table border="1" width="90%" class="buttons"&gt;
  &lt;tr&gt;
  &lt;td width="20%"&gt;&lt;a href="http://www.google.com"&gt;Link1 goes here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="20%"&gt;&lt;a href="http://www.google.com"&gt;Link2&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="20%"&gt;&lt;a href="http://www.google.com"&gt;Link3&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="20%"&gt;&lt;a href="http://www.google.com"&gt;Link4&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
  &lt;td width="20%"&gt;&lt;a href="http://www.google.com"&gt;Link5&lt;br&gt;goes&lt;br&gt;here&lt;/a&gt;&lt;/td&gt;
    &lt;/table&gt;
  
  &lt;/center&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Play with the code:
  <a href="http://codepen.io/anon/pen/bIEtC" rel="nofollow">http://codepen.io/anon/pen/bIEtC</a></p>