title: 100% width table overflowing div container
body: <p>I am having issues with an html table that is overflowing it's parent container.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.page {
      width: 280px;
      border:solid 1px blue;
  }
  
  .my-table {
      word-wrap: break-word; 
  }
  
  .my-table td {
      border:solid 1px #333;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
      &lt;table class="my-table"&gt;
          &lt;tr&gt;
              &lt;th&gt;Header Text&lt;/th&gt;
              &lt;th&gt;Col 1&lt;/th&gt;
              &lt;th&gt;Col 2&lt;/th&gt;
              &lt;th&gt;Col 3&lt;/th&gt;
              &lt;th&gt;Col 4&lt;/th&gt;
              &lt;th&gt;Header Text&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]&lt;/td&gt;
              &lt;td&gt;some data&lt;/td&gt;
              &lt;td&gt;some data&lt;/td&gt;
              &lt;td&gt;some data&lt;/td&gt;
              &lt;td&gt;some data&lt;/td&gt;
              &lt;td&gt;An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly?  I would prefer a CSS only method, but am also open to using Javascript (or jQuery) if absolutely necessary.</p>