JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<table id="viewCurriculumReport:users" width="100%" class="prev_verdana12black">
    <thead>
        <tr>
            <th><span class="userName_heading">User Name</span>
            </th>
            <th><span class="loginId_heading">LoginId</span>
            </th>
            <th><span class="curriculum_heading">Curriculum</span>
            </th>
            <th><span class="grade_heading">Grade</span>
            </th>
            <th><span class="subject_heading">Subject</span>
            </th>
            <th><span class="date_heading">Date of Access </span>
            </th>
            <th><span class="status_heading">Status</span>
            </th>
        </tr>
    </thead>
    <tbody id="viewCurriculumReport:users:tbody_element">
        <tr class="grid_list">
            <td class="asset_ques_title">Super Admin</td>
            <td class="grid_board">superadmin</td>
            <td class="grid_grade">MH_3.0</td>
            <td class="grid_grade">IX</td>
            <td><span class="wrodWrap">Our Environment ,Science ,Economics ,Civics ,Geography ,History ,Algebra ,Geometry ,English </span>
            </td>
            <td>25-Sep-2012</td>
            <td>Active</td>
        </tr </tbody>
</table>

CSS

table {
    width:100%;
    table-layout:fixed;
}
table, td, th {
    border:1px solid black;
    border-collapse: collapse;
    word-wrap:break-word;
    -ms-word-wrap:break-word;
    overflow-wrap:break-word;
}