javascript - 如何在浏览器宽度减小的情况下将表格数据放在开头？

Question

你好我有一个页面和两个 CSS 文件用于表格但是如果我减少浏览器的宽度表格数据(td)是从中心开始而不是从开始。所以我需要当浏览器的宽度减少时表格数据应该从左边开始而不是从中间开始，表格 (th) 的标题应该放在中间。下面是我的代码。

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>

Answer 1

你可以对齐文本和输入

text-align: center;

在这种情况下，您应该在您感兴趣的断点处添加它， 例如:

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