title: max-width in an HTML table
body: <p>Given below an HTML table.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panelgrid {
      table-layout: fixed;
      width: 100%;
      max-width: 500px;
      word-wrap: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="panelgrid" rules="all" border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Id&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Value&lt;/td&gt;
          &lt;td&gt;Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text.&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The style given makes word-wrap occur, when the text entered into the table cells exceeds the specified <code>max-width: 500px;</code> property.</p>
  
  <p>What does not happen is when the width of the text is smaller than the <code>max-width</code> property, the table should automatically fit according to the width of the text which does not happen.</p>
  
  <p>The table width stays at 500px even though in case, the text length is smaller than 500px.</p>
  
  <p>How can it be achieved so that the table automatically shrinks, when the text length is smaller than the specified length (500px in this case)?</p>
  
  <hr>
  
  <p>Currently the above CSS is just like,</p>
  
  <pre><code>.panelgrid {
      table-layout: fixed;
      width: 500px;
      word-wrap: break-word;
  }
  </code></pre>