JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table class="my-list table table-bordered table-hover">
    <tbody>
        <tr>
            <th>User id</th>
            <th>User name</th>
            <th>Type</th>
            <th>Id</th>
            <th>Ad content</th>
            <th>Created at</th>
        </tr>
        <tr>
            <td>66666</td>
            <td>John Smith</td>
            <td>type1</td>
            <td>99999</td>
            <td>
                <div>
                    Good content with words and real sentences.
                </div>
            </td>
            <td>2015-09-02</td>
        </tr>
        <tr>
            <td>777777</td>
            <td>Cortial  Isabelle</td>
            <td>type2</td>
            <td>888888</td>
            <td>
                <div>
					xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </div>
            </td>
            <td>2015-09-02</td>
        </tr>
    </tbody>
</table>

CSS

.my-list {
    max-width: 100%
}
th{
    max-width: 300px;
}
td{
    word-wrap: break-word;
    width: 100%
}