title: CSS+HTML: How to draw table/cell border
body: <p>Here is my CSS code for table:</p>
  
  <pre><code>table.t_data
  {
      /* border: 1px; - **EDITED** - doesn't seem like influences here */
      background-color: #080;
      border-spacing: 1px;
      margin: 0 auto 0 auto;
  }
  table.t_data thead th, table.t_data thead td
  {
      background-color: #9f9;
      /* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */
      padding: 5px;
      margin: 1px;
  }
  table.t_data tbody th, table.t_data tbody td
  {
      background-color: #fff;
      /* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */
      padding: 2px;
  }
  </code></pre>
  
  <p>I need to display the following HTML:</p>
  
  <pre><code>&lt;table class="t_data"&gt;
      &lt;thead style="padding:1px"&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Team&lt;/th&gt;
              &lt;th&gt;Stadium Name&lt;/th&gt;
              &lt;th&gt;Size&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Team 1&lt;/td&gt;
              &lt;td&gt;Name 1&lt;/td&gt;
              &lt;td&gt;Size 1-1, 2-1, 3-1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;Team 1&lt;/td&gt;
              &lt;td&gt;Name 1&lt;/td&gt;
              &lt;td&gt;Size 1-1, 2-1, 3-1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;Team 1&lt;/td&gt;
              &lt;td&gt;Name 1&lt;/td&gt;
              &lt;td&gt;Size 1-1, 2-1, 3-1&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It display perfect (as expected) table in Mozilla Firefox and in IE8:</p>
  
  <p><img src="https://i.stack.imgur.com/EJqtn.png" alt="Mozilla table formatted"></p>
  
  <p>But there are issues in other browsers/modes:</p>
  
  <p>In Chrome the line between head and body is double width:</p>
  
  <p><img src="https://i.stack.imgur.com/DXsKl.png" alt="Chrome table formatted"></p>
  
  <p>In IE8 (switched into IE7 compatibility mode) all lines are double width:</p>
  
  <p><img src="https://i.stack.imgur.com/QYDaS.png" alt="IE table formatted"></p>
  
  <p>Question: what are CSS options to make each line boldness same (1px)?</p>