Wrapping words in table cell, but table-layout fixed makes columns equal size

Question

In my HTML table sometimes I have long words in my cells. So I need to break some words if they overflows its area.
This questions shows how to break table cell: Word-wrap in an HTML table
This css style is recommended : style="word-wrap: break-word; table-layout: fixed; width: 100%"

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.

My fiddle: http://jsfiddle.net/mavent/Y54s9/17/

What I need ?
- My table has 2 columns, I want second column to be as narrow as possible.
- 2nd column's width shouldn't exceed column's name.
- Column names shouldn't be wrapped. < th > names mustn't be wrapped.
- 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.
- Table should be responsive. I will use this table in mobile layouts.
- 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.

Output should look like this in small and big screens:

Code:

.myclass1 {
    white-space: normal;
}

.myclass2 {
    word-wrap: break-word;
    table-layout: fixed;
}

<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>

    </tbody>
</table>

<hr><hr>

    <table class="table table-striped table-condensed dataTable myclass1" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>
        <tr>
            <td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>

            </td>
        </tr>
    </tbody>
</table>

<hr><hr>

    <table class="table table-striped table-condensed dataTable myclass2" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>
        <tr>
            <td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

It seems that with HTML and CSS, you cannot cause automatic word breaking in table cells without making table columns of fixed width and using table-layout: fixed). And you cannot specify that one column be just as narrow as it needs and the other column take all the rest (when table-layout: fixed is used).

However, there’s a rather simple JavaScript workaround, though for a large table, it might cause inefficiency (and a flash from initial layout to modified layout). You would not set fixed layout initially, or column widths, just a total width of 100%. You would thus let the browser format the table in automatic layout, so that the second column becomes just as wide as it needs to be (assuming there is enough content in the other column, as we can expect here). Then you just get the width of the second column and explicitly set it on the header cell and you set table layout to fixed.

Sample code:

<style>
#mytable {
    word-wrap: break-word;
    width: 100%;
}
</style>
...
<table id="mytable"
...
<script>
window.onload = function() {
  var t = document.getElementById('mytable');
  var th2 = t.rows[0].cells[1];
  th2.style.width = th2.clientWidth + 'px';
  t.style.tableLayout = 'fixed';
}
</script>

P.S. I still think this is an all wrong approach, unless the cell content is some code of very special kind, like a DNA sequence, that can really be broken at any point. For any normal and abnormal text in human languages, hyphenation or other language-specific word division should be applied. For most code expressions, permissible break points should be indicated, if needed, e.g. with the <wbr> tag or with zero-width no-break spaces.