javascript - how to place the Table data in begining while browser width is decreased? -
hi have page , 2 css files table if decrease width of browser table data(td) starts centre not beginning.so need when width of browser decreased table data should start left not middle , heading of table (th) should place in middle.below code.
tableresponsive.css -------------------------------- @media screen , (max-width: 760px), (min-device-width: 768px) , (max-device-width: 1024px) { /* table properties phone */ table.phone thead, table.phone tbody, table.phone th, table.phone td, table.phone tr { display: block; } /* table properties datepicker */ table.ui-datepicker table, table.ui-datepicker thead, table.ui-datepicker tbody, table.ui-datepicker th, table.ui-datepicker td, table.ui-datepicker tr { display:none; } /* hide table headers (but not display: none;, accessibility) */ table:not(.ui-datepicker-calendar) thead tr, th { position: absolute; top: -9999px; left: -9999px; } table:not(.ui-datepicker-calendar) tr { border: 1px solid #ccc; } table#login tr { border: 1px solid #ccc; } table:not(.ui-datepicker-calendar) td { /* behave "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } table:not(.ui-datepicker-calendar) td:before { position: absolute; //top: 4px; left: 4px; //width: 45%; padding-right: 10px; white-space: nowrap; } #heading{ float:right; } /* label data*/ #phone td:nth-of-type(1):before { content: "type"; } #phone td:nth-of-type(2):before { content: "country"; } #phone td:nth-of-type(3):before { content: "phone"; } #phone td:nth-of-type(4):before { content: "preferred"; } #phone td:nth-of-type(4):before { content: "add/delete"; } #major td:nth-of-type(1):before { content: "preferred"; } #major td:nth-of-type(2):before { content: "major"; } #major td:nth-of-type(3):before { content: "concentration"; } #major td:nth-of-type(4):before { content: "status"; } #education thead:nth-of-type(1):before { content: "#educational information"; } #education td:nth-of-type(1):before { content: "school code"; } #education td:nth-of-type(2):before { content: "school name"; } #education td:nth-of-type(3):before { content: "high school average"; } #education td:nth-of-type(4):before { content: "gpa type"; } #education td:nth-of-type(5):before { content: "cgpa"; } #education td:nth-of-type(6):before { content: "accdemic level"; } #education td:nth-of-type(7):before { content: "degree"; } #education td:nth-of-type(8):before { content: "degree date"; } #education td:nth-of-type(9):before { content: "transcript date"; } #education td:nth-of-type(10):before { content: "add/delete"; } #test td:nth-of-type(1):before { content: "preference"; } #test td:nth-of-type(2):before { content: "major"; } #test td:nth-of-type(3):before { content: "concentration"; } #test td:nth-of-type(4):before { content: "status"; } #test td:nth-of-type(5):before { content: "add/delete"; } #employee td:nth-of-type(1):before { content: "job_title"; } #employee td:nth-of-type(2):before { content: "employer"; } #employee td:nth-of-type(3):before { content: "from"; } #employee td:nth-of-type(4):before { content: "to"; } #employee td:nth-of-type(5):before { content: "add/delete"; } #emergency_contact td:nth-of-type(1):before { content: "relationship"; } #emergency_contact td:nth-of-type(2):before { content: "first name"; } #emergency_contact td:nth-of-type(3):before { content: "last name"; } #emergency_contact td:nth-of-type(4):before { content: "phone"; } #emergency_contact td:nth-of-type(5):before { content: "email id"; } #emergency_contact td:nth-of-type(6):before { content: "consent"; } #emergency_contact td:nth-of-type(7):before { content: "working/student"; } #emergency_contact td:nth-of-type(8):before { content: "employee/student id"; } #emergency_contact td:nth-of-type(9):before { content: "add/delete"; } #personal_document td:nth-of-type(1):before { content: "attachment type"; } #personal_document td:nth-of-type(2):before { content: "attached file"; } #personal_document td:nth-of-type(3):before { content: "view"; } #personal_document td:nth-of-type(4):before { content: "add attachment"; } #personal_document td:nth-of-type(5):before { content: "accepted"; } #personal_document td:nth-of-type(6):before { content: "rejection reason"; } #accademic_transcripts td:nth-of-type(1):before { content: "attached file"; } #accademic_transcripts td:nth-of-type(2):before { content: "view"; } #accademic_transcripts td:nth-of-type(3):before { content: "add attachment"; } #accademic_transcripts td:nth-of-type(4):before { content: "accepted"; } #accademic_transcripts td:nth-of-type(5):before { content: "rejection reason"; } #accademic_transcripts td:nth-of-type(6):before { content: "add/delete"; } #accademic_documents td:nth-of-type(1):before { content: "attached file"; } #accademic_documents td:nth-of-type(2):before { content: "view"; } #accademic_documents td:nth-of-type(3):before { content: "add attachment"; } #accademic_documents td:nth-of-type(4):before { content: "accepted"; } #accademic_documents td:nth-of-type(5):before { content: "rejection reason"; } #accademic_documents td:nth-of-type(6):before { content: "add/delete"; } #other_document td:nth-of-type(1):before { content: "attached file"; } #other_document td:nth-of-type(2):before { content: "view"; } #other_document td:nth-of-type(3):before { content: "add attachment"; } #other_document td:nth-of-type(4):before { content: "accepted"; } #other_document td:nth-of-type(5):before { content: "rejection reason"; } #other_document td:nth-of-type(6):before { content: "add/delete"; } } /* smartphones (portrait , landscape) ----------- */ @media screen , (min-device-width : 320px) , (max-device-width : 480px) { body { padding: 0; margin: 0; width: 320px; } } /* ipads (portrait , landscape) ----------- */ @media screen , (min-device-width: 768px) , (max-device-width: 1024px) { body { //width: 495px; } } #content { width: auto; float: left; } #middle { width: auto; /* account margins + border values */ float: left; } #sidebar { width: auto; float: left; } tablestyle.css ------------------------- @charset "utf-8"; table:not(.ui-datepicker) { font-family: arial,sans-serif; font-size: 8pt; border: 1px solid black; border-collapse:collapse; border-spacing:5px; } table:not(.ui-datepicker-calendar) tr:nth-child(odd){ //background:#b8d1f3; background:rgb(233,237,244); } table:not(.ui-datepicker-calendar) tr:nth-child(even){ //background:#dae5f4; background:rgb(211,220,232) } table:not(.ui-datepicker-calendar) th{ //background:#666; background:rgb(92,133,179); color:white; font-weight: bold; text-decoration: underline; } table:not(.ui-datepicker-calendar) td { padding: 5px; font-size: 9pt; border: 1px solid green; } table:not(.ui-datepicker-calendar):hover { //outline: 2px dashed #0090d2;} table:not(.ui-datepicker) input[type='text']{ width:120px; } } <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/custom_style.css"> <!--<link rel="stylesheet" type="text/css" href="css/tablestyle.css">--> <link rel="stylesheet" type="text/css" href="css/tablestyleresponsive.css"> </head> <!-- body started--> <body> <form name="loginform" id="loginform" method="get" action="basic.html" onsubmit="return loginvalidator()"> <table id="login" width="100%" name="login" style="border:collapse"> <tr> <th colspan="3" bgcolor="#5c85b3">login here </th> </tr> <tr> <td> <label>user id:</label> <input type="text" name="email_id" id="email_id" value=""> </td> <td> <label>password:</label> <input type="password" name="password" id="password" value=""> </td> <td> <input type="button" name="login" id="login" value="login in"> </td> </tr> <tr> <td> <a href="../../../../ashish/forgotpassword.html">forgot password</a> </td> </tr> </table> </form> <p></p> <form name="registerform" id="registerform" method="post" action="basic.html" onsubmit="return registervalidator()"> <table id="login" width="100%" name="login"> <tr> <th colspan="3" bgcolor="#5c85b3">register here </th> </tr> <tr> <td> <label>choose user id:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <label>choose password:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <label>confirm password:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <label>email address:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <label>first name:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <label>last name:</label> <input type="text" name="email_id" id="email_id" value=""> </td> </tr> <tr> <td> <input type="button" name="register" id="login" value="create account"> </td> </tr> </table> </form> <p></p> <form name="verifyform" id="verifyform" method="get" action="basic.html" onsubmit="return verifyvalidator()"> <table id="login" width="100%" name="login"> <tr> <th colspan="3" bgcolor="#5c85b3">verify here </th> </tr> <tr> <td> <label>user id:</label> <input type="text" name="email_id" id="email_id" value=""> </td> <td> <label>verification code:</label> <input type="text" name="vrfy_cd" id="vrfy_cd" value=""> </td> <td> <input type="button" name="verify" id="login" value="verify"> </td> </tr> <tr> <td> <a href="../../../../ashish/verification.html">resend code</a> </td> </tr> </table> </form> </body> </html>
you can align text , input with
text-align: center; in scenario should add @ breakpoint you're interested in, ex.:
@media screen , (max-width : 400px){ td{ text-align: left;} td input{text-align: center;} }
Comments
Post a Comment