how to place the Table data in begining while browser width is decreased?

Question

Hi I have a page and two CSS files for the table but if I decrease the width of browser the table data(td) are starts from centre not from beginning.SO I need when the width of browser decreased the table data should start from left not from middle and the heading of table (th) should place in the middle.Below is my Code.

tableresponsive.css
--------------------------------
@media  only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* table properties for phone  */
    table.phone thead,
    table.phone tbody,
    table.phone th,
    table.phone td,
    table.phone tr {
    display: block;
    }
    /* table properties for 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;, for 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  like a "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 the 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 and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px; }
    }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        //width: 495px;
    }
}



#content {
width: auto;
float: left;
}

#middle {
width: auto; /* Account for 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 Your User ID:</label>
                    <input type="text" name="email_ID" id="email_ID" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Choose Your Password:</label>
                    <input type="text" name="email_ID" id="email_ID" value="">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Confirm Your 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>

correct me if i'm wrong: you want the td with align = center if the browser is "large" enough (can you specify this in px or em?) and if the browser resizes to a smaller width you want to change the align to left? — Wolfgang, May 12 '15 at 08:39
@WolfgangVogl you are correct the requirement like if you resize the browser the td data has to align as left. — , May 12 '15 at 08:45

maioman · Answer 1 · 2015-05-12T08:53:36.837

1

you can align text and input with

text-align: center;

in this scenario you should add this at the breakpoint you're interested in, for ex.:

@media only screen and (max-width : 400px){
td{ text-align: left;}
td input{text-align: center;}
}

edited May 12 '15 at 08:53

answered May 12 '15 at 08:40

maioman

15,071
4
30
42

but the td contain both label and input text so how i cam align the text as left and input box as middile – May 12 '15 at 08:47
with the correct css selector: table td label { text-align: ... } table td input { text-align: .... } – Wolfgang May 12 '15 at 08:50
I edited answer: give general `td` style and then override for specific `input` desired behaviour – maioman May 12 '15 at 08:54

how to place the Table data in begining while browser width is decreased?

1 Answers1