title: CSS: control direction of table growth when font size changes
body: <p>We have a charting package we use (jqPlot) and it creates a legend
  box that is rendered as a table. My users asked for the ability to make the legend larger or
  smaller, so I gave them some buttons that when clicked change the font
  size of the items in the legend and that works fine.</p>
  
  <p>Issue is that as the legend box gets larger or smaller it's 'anchored'
  at its upper right corner. and grows to the left and shrinks to the
  right. My users want it to be anchored on the upper left corner and
  grow to the right and shrink to the left. I'm not sure how to do that.
  I didn't create the page, the charting package did, but I can
  manipulate the CSS in jQuery.</p>
  
  <p>Here is all the CSS associated with the legend. I copied this from the
  chrome developer's tools.</p>
  
  <pre><code>element.style {
  position: absolute;
  margin-top: 0px;
  z-index: 3;
  right: 0px;
  top: 9px;
  font-size: 11.8px;
  }
  
  table.jqplot-table-legend {
  max-height: 450px;
  padding-right: 20px;
  overflow: auto;
  display: block;
  }
  
  table.jqplot-table-legend,table.jqplot-cursor-legend {
  background-color: rgba(255,255,255,0.6);
  border: 1px solid #cccccc;
  }
  
  table.jqplot-table-legend {
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 12px;
  }
  
  user agent stylesheet table {
  border-collapse: separate;
  border-spacing: 2px;
  }
  
  Inherited from
  div#chart_0.jqplot-target
  .jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }
  
  Inherited from
  body.ng-scope
  body {
  margin: 0px 0px 3em 0px;
  background-color: white;
  }
  </code></pre>