JSFiddle - React, Tailwind, and code Playground

by mavent

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 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...

CSS

.myclass1 {
    white-space: normal;
}

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