JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <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>

CSS

.myclass1 {
    white-space: normal;
}

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

#mytable > thead > tr > th:nth-child(1)
{
    width:70%;
}

#mytable > tbody > tr:nth-child(1) > td:nth-child(1)
{
    width:70%;
}