title: Why is the actual width on my <th> less than the specified CSS width?
body: <p>I have an html table that I souped up to allow for sorting, resizable/movable columns, and a fixed header row.  The fixed header caused a disconnect in the header cells and their corresponding content cells so that resizing the <code>&lt;th&gt;</code> did not resize the <code>&lt;td&gt;'s</code> in that column. As a work-around, I added some code to manually change the width of the content of the relevant <code>&lt;td&gt;</code> elements when the <code>&lt;th&gt;</code> is resized. It seems to work fine in most cases, but sometimes the column widths still don't line up exactly. I used chrome dev tools to examine the html during one of the hiccups, and although the <code>width</code> style on both the <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> is the same, the <em>actual</em> width ( as returned by $(elt).width() ) was 3px less than the specified width for the <code>&lt;th&gt;</code>. Does anyone know what might cause this?</p>
  
  <p><strong>EDIT:</strong> I realized that this only happens when I resize the columns so that the total width of the table is larger than the parent div. The content cells overflow and allow me to scroll horizontally, but the <code>&lt;thead&gt;</code> stays its fixed width and adjusts some of the <code>&lt;th&gt;</code> elements smaller to compensate.</p>
  
  <p>CSS:</p>
  
  <pre><code>.blotter {
      overflow-y: hidden;
      overflow-x: auto;
      position: relative;
      border-left: solid thin silver;
  }
  
  .blotter-table {
      table-layout: fixed;
      margin-bottom: -1px;
  }
  
  tbody {
      height: 400px;
      max-height: 400px; 
      overflow: auto;
  }
  
  thead&gt;tr,tbody {
      display: block;
  }
  
  td&gt;div {
      overflow: hidden;
  }
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="blotter"&gt;
      &lt;table class="table table-bordered table-hover table-condensed blotter-table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th id="tradeaggregation_numTrades" draggable="true" style="width: 422px; cursor: pointer; opacity: 1;"&gt;# Trades&lt;img src="resources/img/down_arrow.png" class="pull-right" id="imgSort" style="opacity: 1; cursor: e-resize;"&gt;&lt;/th&gt;
                  &lt;th id="tradeaggregation_listValues" draggable="true" style="width: 305px; cursor: pointer; opacity: 1;"&gt;List Values&lt;/th&gt;
                  &lt;th id="tradeaggregation_mgmtId" draggable="true" style="width: 66px; opacity: 1; cursor: e-resize;"&gt;mgmtId&lt;/th&gt;
                  &lt;th id="tradeaggregation_sizeSum" draggable="true" style="width: 78px; cursor: pointer; opacity: 1;"&gt;Size Sum&lt;/th&gt;      
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;         
              &lt;tr id="tradeaggregation0"&gt;             
                      &lt;td&gt;&lt;div id="tradeaggregation0_0" style="overflow: hidden; width: 422px;"&gt;8,113&lt;/div&gt;&lt;/td&gt;              
                      &lt;td&gt;&lt;div id="tradeaggregation0_1" style="overflow: hidden; width: 305px;"&gt;4RAJA-SUN null &lt;/div&gt;&lt;/td&gt;                    
                      &lt;td&gt;&lt;div id="tradeaggregation0_2" style="overflow: hidden; width: 66px;"&gt;10,831,124,369&lt;/div&gt;&lt;/td&gt;                  
                      &lt;td&gt;&lt;div id="tradeaggregation0_3" style="overflow: hidden; width: 78px;"&gt;19,048,548&lt;/div&gt;&lt;/td&gt;                  
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>