Question

我的目标是让我的表格列对齐。我的表目前以这种方式设置，因为我想要一个带滚动条的表，并为每一行提供它自己的边框和边距。当鼠标覆盖一行时，该行会改变颜色。我有这些功能，但现在我无法对齐表格列。

这是我目前的表格。

tbody有一个滚动条，每个tbody tr都有一个边距。 tbody的固定高度为25vh。表，thead，th，tbody元素被硬编码到html中。页面加载后，tbody行由jquery写入。我给了td和th元素1px纯黑色边框，以显示边距和填充。我计划在对齐后删除它们。

下面是我的静态HTML代码。

    <h3 id = "UpdateEmpyeeCaption">Update Employee Table</h3>           
        <table id = "UpdateEmployeeTable" >

            <thead id ="UpdateTableHeadders" >      
                <tr>
                    <th class = "UpHeaderCell">EmployeeID </th>
                    <th class = "UpHeaderCell">Firstname </th>
                    <th class = "UpHeaderCell">Lastname </th>
                    <th class = "UpHeaderCell">Username </th>
                    <th class = "UpHeaderCell">Password </th>
                    <th class = "UpHeaderCell">Lifeguard </th>
                    <th class = "UpHeaderCell">Instructor </th>
                    <th class = "UpHeaderCell">Headguard </th>
                    <th class = "UpHeaderCell">Supervisor </th>
                </tr>
            </thead>


            <tbody id = "UpdateEmployeeTableinner">

            </tbody>

        </table>

接下来是我用来将表行附加到tbody中的函数。

    function loadTable(  employeelist   )
    {
        var MSG = "";
        EmployeeList = employeelist;

        for( var emp in  employeelist   )
        {
            var id = employeelist[emp]["employeeID"];
            var firstname = employeelist[emp]["Firstname"];
            var lastname = employeelist[emp]["Lastname"];
            var username = employeelist[emp]["Username"];
            var Password = employeelist[emp]["Password"];
            var lifeguard = "";
                if (  employeelist[emp]["Lifeguard"] == true ){ lifeguard = "Yes"; }else{ lifeguard = "no"; }
            var instructor = "";
                if (  employeelist[emp]["Instructor"] == true ){ instructor = "Yes"; }else{ instructor = "no"; }
            var headguard = "";      
                if (  employeelist[emp]["Headguard"] == true ){ headguard = "Yes"; }else{ headguard = "no"; }
            var supervisor = "";         
                if (  employeelist[emp]["Supervisor"] == true ){ supervisor = "Yes"; }else{ supervisor = "no"; }


            MSG += "<tr class = \"UpdateEmployeeCell notHoverTable\">";
                MSG += "<td class =\"upEmCell\"> "+id+"   </td>";
                MSG += "<td class =\"upEmCell\"> "+firstname+"   </td>";
                MSG += "<td class =\"upEmCell\"> "+lastname+"  </td>";
                MSG += "<td class =\"upEmCell\"> "+username+"   </td>";
                MSG += "<td class =\"upEmCell\"> "+Password+"    </td>";
                MSG += "<td class =\"upEmCell\"> "+lifeguard+"  </td>";
                MSG += "<td class =\"upEmCell\"> "+instructor+"   </td>";
                MSG += "<td class =\"upEmCell\"> "+headguard+"   </td>";
                MSG += "<td class =\"upEmCell\"> "+supervisor+"   </td>";   
            MSG += "</tr>";
        }//End of for each employee in employeelist

        //Put the rows into tbody of the table.         
        $('#UpdateEmployeeTableinner').empty();
        $('#UpdateEmployeeTableinner').append( MSG );

    }/* End of Function loadTable */

我的Css被应用于pitcure中的表

    /* Start of Update Employee Table*/
        /*table*/
        #UpdateEmployeeTable {
            border: 3px solid black;            
            margin: 0;
            padding: 0 0 0 0;               
            overflow:hidden;        
            display: block;
        }
        /*thead*/
        #UpdateTableHeadders {
            background: rgb(221,221, 221);
            display: block;     
            padding: 0em 1em 0em 1em;/* top right bottom left*/
            margin: 0; /*margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>*/
            border-bottom: 3px solid black;     

        }
        /*th*/
        .UpHeaderCell {
            display: inline;
            border: 1px solid black;
            width: 11%;
        }           
        /*tbody*/
        #UpdateEmployeeTableinner {
            border: 1px solid black;
            background: white;                  
            overflow: auto;
            height: 25vh;
            display: block;         
        }           
        /*tr inside tbody*/
        .UpdateEmployeeCell {                       
            border: 1px solid black;
            margin:  0.5em 0.2em 0.5em 0.2em ; /*top right  bottom left*/
            display: block;
            overflow: hidden;
            padding: 0.1em;
        }
        /*td*/          
        .upEmCell {
            display: inline-block;
            border: 1px solid black;            
        }       
        /*When a table row does not have mouse hover*/
        .notHoverTable {
            background-color: rgb(4,211,255);
            color: black;
            border: 2px solid black;
        }
        /*When a table row does have mouse hover*/
        .liOVERTable {
            background-color: rgb(5, 255, 12);
            border: 2px solid black;
            color: black;
            cursor: pointer; 
            cursor: hand; 
        }                   
    /* End of Update Employee Table*/

那么如何更改CSS以显示与正确间距对齐的表格列？我是否需要使用Javascript来实现正确的对齐？我希望将解决方案保持为CSS。

如何在显示属性更改后重新调整表列？

0 个答案: