#two-column-cf {
  width: 100%;
}
#two-column-cf #left {
  width: 50%;
  float: left;
}
#two-column-cf #right{
   width: 50%;
   float: right;
}

/* Section One*/

th { background: #c5c5c5;}
table {
        border-collapse: collapse;
        border: 1px solid #cdcdcd;
        font: normal 12px arial; 
        width: 100%;
}
td, th { border: 1px solid #cdcdcd; padding: 2px;}

/* Section two*/

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
        /* Section three*/
                table, thead, tbody, th, td, tr { 
                        display: block; 
                }
                /* Section four*/
                thead tr { 
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                }
                
                tr { border-bottom: 1px solid #ccc; }
/* Section five*/
                td { 
                     border: none;
                     border-bottom: 1px solid #eee; 
                     position: relative;
                     padding-left: 50%; 
                }
                td:before { 
                        position: absolute;
                        top: 3px;
                        left: 6px;
                        width: 45%; 
                        padding-right: 10px; 
                        white-space: nowrap;
                        font-weight: bold;
                }
                /* Section six*/

                td:nth-of-type(1):before { content: "First Name"; }
                td:nth-of-type(2):before { content: "Last Name"; }
                td:nth-of-type(3):before { content: "Job Title"; }
                td:nth-of-type(4):before { content: "Joining Date"; }
                td:nth-of-type(5):before { content: "Total Experience"; }
                td:nth-of-type(6):before { content: "Relevant Experience"; }
                td:nth-of-type(7):before { content: "Date of Birth"; }
                td:nth-of-type(8):before { content: "Current City"; }
                td:nth-of-type(9):before { content: "Prefered City"; }
                td:nth-of-type(10):before { content: "Nationality"; }
}

/* Section seven*/
        @media only screen
        and (min-device-width : 320px)
        and (max-device-width : 480px) {
                body { 
                        padding: 0; 
                        margin: 0; 
                        width: 320px; }
                }
/* Section eight*/
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body { 
                        width: 495px; 
                }
        }