title: Border inside a cell
body: <p>How do I set CSS to show borders inside td rather than outside on hover. Normally when I hover a cell and I have set border in hover style, the table rows moves by width of hover border. I want it to show inside thus no moving. (For example cell is 10px width and I add 2px border I still want it be 10 pixel width but with 2px border on each side, thus 6px left for consent.)</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/reg4f/" rel="nofollow noreferrer">http://jsfiddle.net/reg4f/</a></p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
   &lt;td&gt;
     &lt;a&gt;po&lt;/a&gt;
   &lt;/td&gt;
   &lt;td&gt;
     &lt;a&gt;út&lt;/a&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>table {
    width: 250px;
    height: 250px;
    table-layout: fixed;
    border: solid black 1px;
    border-collapse: collapse;
  }
  table td, table tr {
    text-align: right;
    vertical-align:middle; 
  }
  td:hover{
    background-color: #E5F3FB;
    border: solid 4px #70C0E7;
    border-style: inset;
  }
  td a {
    display:block;width:100%;height:100%;margin:0
  }  
  </code></pre>