Basic Table

by Jason Rose

HTML

<div id="content">
     <h1>Customer Name RBAC Report<small>24/07/2015 10:54:65</small></h1>

    <table class="table">
        <thead>
            <tr>
                <th>Role Group</th>
                <th>Assigned Roles</th>
                <th>Members</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="RoleGroup">Organization Management
                    <p class="RoleDescription">For admins who need to have administrative access to the entire Exchange 2010 organization.</p>
                </td>
                <td class="AssignedRoles">Send Connectors-Organization Management</td>
                <td class="Members">Exchange Organization Administrator</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

html, body {
    margin: 0;    
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    font-size: 12px;
}
#content {
    text-align: center;
    padding: 20px;
}
h1 {
    font-size: 36px;
    font-weight: 100;
}
h1 small {
    font-size: 45%;
    color: gray;
    padding-left: 20px;
}
.table {
    width: 100%;
    border: 1px solid #C0C0C0;
    border-collapse: collapse;
    padding: 6px;
}
.table th {
    border: 1px solid #C0C0C0;
    padding: 5px;
    background: #F0F0F0;
    text-align: left;
    font-size: 14px;
}
.table td {
    border: 1px solid #C0C0C0;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}
.RoleGroup {
    text-align: left;
    font-size: 14px;
    color: green;
    min-width: 25%;
    width: 25%;
    max-width: 30%;
}
.RoleDescription {
    text-align: left;
    font-size: 12px;
    color: red;
}
.AssignedRoles {
    text-align: left;
    font-size: 12px;
    color: blue;
    min-width: 25%;
    width: 25%;
    max-width: 30%;
}
.Members {
    text-align: left;
    font-size: 14px;
    color: magenta;
    min-width: 25%;
    width: 35%;
    max-width: 35%;
}