title: Wrapping words in table cell, but table-layout fixed makes columns equal size
body: <p>In my HTML table sometimes I have long words in my cells. So I need to break some words if they overflows its area.<br>
  This questions shows how to break table cell: <a href="https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table">Word-wrap in an HTML table</a><br>
  This css style is recommended : <code>style="word-wrap: break-word; table-layout: fixed; width: 100%"</code></p>
  
  <p>But if I use table-layout:fixed, my columns becomes equal sized. But in my case width is 100% for table and if table is fixed then columns share width equally. But this takes too much height from page.</p>
  
  <p>My fiddle: <a href="http://jsfiddle.net/mavent/Y54s9/17/" rel="nofollow noreferrer">http://jsfiddle.net/mavent/Y54s9/17/</a></p>
  
  <p>What I need ?<br>
  - My table has 2 columns, I want second column to be as narrow as possible.<br>
  - 2nd column's width shouldn't exceed column's name.<br>
  - Column names shouldn't be wrapped. &lt; th > names mustn't be wrapped.<br>
  - 1st column should be wide. I don't prefer to fixate column width like %60, %70 etc. But if it is a solution I can use fix column width, but responsiveness must be taken into account.<br>
  - Table should be responsive. I will use this table in mobile layouts.<br>
  - Word must be wrapped strictly if word exceeds the cell width. For example if cell can take max 40 characters and word is 45 characters, word can be breaked whatever 41. character is.</p>
  
  <p>Output should look like this in small and big screens:<br>
  <img src="https://i.stack.imgur.com/BKWOv.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/lWqPF.png" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <pre><code>.myclass1 {
      white-space: normal;
  }
  
  .myclass2 {
      word-wrap: break-word;
      table-layout: fixed;
  }
  
  &lt;table class="table table-striped table-condensed dataTable myclass1" id="mytable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="sorting"&gt;header1&lt;/th&gt;
              &lt;th class="sorting"&gt;header2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class=""&gt;
              &lt;td class=""&gt;
  &lt;span class=""&gt;Some words are generally short and easy to read
  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-share-alt"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/td&gt;
              &lt;td class=""&gt;
  &lt;span&gt;&lt;button class="btn btn-primary btn-xs"&gt;123&lt;/button&gt;&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;hr&gt;&lt;hr&gt;
  
      &lt;table class="table table-striped table-condensed dataTable myclass1" id="mytable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="sorting"&gt;header1&lt;/th&gt;
              &lt;th class="sorting"&gt;header2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class=""&gt;
              &lt;td class=""&gt;
  &lt;span class=""&gt;Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-share-alt"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/td&gt;
              &lt;td class=""&gt;
  &lt;span&gt;&lt;button class="btn btn-primary btn-xs"&gt;123&lt;/button&gt;&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
  &lt;span&gt;Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-share-alt"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/td&gt;
              &lt;td class=""&gt;
  &lt;span&gt;&lt;button class="btn btn-primary btn-xs"&gt;225&lt;/button&gt;&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;hr&gt;&lt;hr&gt;
  
      &lt;table class="table table-striped table-condensed dataTable myclass2" id="mytable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="sorting"&gt;header1&lt;/th&gt;
              &lt;th class="sorting"&gt;header2&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class=""&gt;
              &lt;td class=""&gt;
  &lt;span class=""&gt;Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-share-alt"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/td&gt;
              &lt;td class=""&gt;
  &lt;span&gt;&lt;button class="btn btn-primary btn-xs"&gt;123&lt;/button&gt;&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
  &lt;span&gt;Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-share-alt"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/td&gt;
              &lt;td class=""&gt;
  &lt;span&gt;&lt;button class="btn btn-primary btn-xs"&gt;225&lt;/button&gt;&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>