DataTables

DataTables Examples

HTML

<head>
    <title>Example 1 - apply dataTable()</title>

    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">

    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>

<body>
    <div class="container">
        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Value1</th>
                    <th>Value2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Brazil</td>
                    <td>
                        <div>
                            500
                            <br>500
                            <br>500
                            <br>
                        </div>
                    </td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>Russia</td>
                    <td><div>
                    501
                    </div></td>
                    <td>201</td>
                </tr>
                <tr>
                    <td>India</td>
                    <td>502</td>
                    <td>202</td>
                </tr>
                <tr>
                    <td>China</td>
                    <td>503</td>
                    <td>203</td>
                </tr>
            </tbody>
        </table>

    </div>
</body>

CSS

#example {
    table-layout: fixed;
}

#example > tbody > tr > td > div {
    max-height: 30px !important;
    overflow: hidden;
    white-space: nowrap;
}

#example > tbody > tr > td > br {
    display: normal;
}

JavaScript

$(document).ready(function() {
    $('#example').dataTable();
});