将表头文本与表正文文本对齐？

Question

我无法弄清楚如何将左侧标题中的文字与正文标题中的文字对齐。该表是一个可滚动的表。

＆＃13;

＆＃13;

.container {
    padding-left:260px;
    table-layout: fixed;
    text-align: left;
}

.tableheader{
    background-color: rgba(255, 255, 255, 0.3);
    width: 1000px;
}

.tablecontent{
    height: 100px;
    width: 1000px;
    overflow-x: auto;
    margin-top: 0px;
    border: 1px solid rgba(255,255,255,0.3);
}

th{
    font-weight: 500;
    font-size: 12px;
    color: rgb(68, 68, 68);
    text-transform: uppercase;
    padding: 20px;
    width: 100px;

}

td{
    padding: 15px;
    width: 100px; 
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: rgb(59, 59, 59);
    border-bottom: solid 1px rgba(255,255,255,0.1);
}

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

＆＃13;

<section  class="container">
    <div class="tableheader" >
        <table cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Status</th>
                    <th>Time</th>
                    <th>Date</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="tablecontent">
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody class="tablecontent">
                <?php echo $stafftable?>
            </tbody>        
        </table>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，表头文本对齐方式与表体对齐方式不同。我似乎无法找到问题所在。我已尝试编辑填充以及th和tr的宽度。

Answer 1

因为你设置了th和td的不同填充。

试试这个：

＆＃13;

＆＃13;

.container {
    padding-left:260px;
    table-layout: fixed;
    text-align: left;
}

.tableheader{
    background-color: rgba(255, 255, 255, 0.3);
    width: 1000px;
}

.tablecontent{
    height: 100px;
    width: 1000px;
    overflow-x: auto;
    margin-top: 0px;
    border: 1px solid rgba(255,255,255,0.3);
}

th{
    font-weight: 500;
    font-size: 12px;
    color: rgb(68, 68, 68);
    text-transform: uppercase;
    padding: 15px;
    width: 100px;

}

td{
    padding: 15px;
    width: 100px; 
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: rgb(59, 59, 59);
    border-bottom: solid 1px rgba(255,255,255,0.1);
}

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

＆＃13;

<section  class="container">
            <div class="tableheader" >
                <table cellpadding="0" cellspacing="0" border="0">
                    <thead>
                        <tr>
                            <th align="left">Username</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Status</th>
                            <th>Time</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tablecontent">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tbody class="tablecontent">
                         <tr>
                            <td>Username</td>
                            <td>Name</td>
                            <td>Position</td>
                            <td>Status</td>
                            <td>Time</td>
                            <td>Date</td>
                        </tr>
                    </tbody>        
                </table>
            </div>
 </section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

调整td填充属性以匹配th的属性。在您的示例中，td有填充15px，th有20px。它负责左缩进，因此将其调整为相同。在下面的示例中，它设置为20px。考虑在一个地方做这件事，比如

td, th { padding: 20px; }

工作示例：

＆＃13;

＆＃13;

 .container {
    padding-left:260px;
    table-layout: fixed;
    text-align: left;
}

.tableheader{
    background-color: rgba(255, 255, 255, 0.3);
    width: 1000px;
}

.tablecontent{
    height: 100px;
    width: 1000px;
    overflow-x: auto;
    margin-top: 0px;
    border: 1px solid rgba(255,255,255,0.3);
}

th{
    font-weight: 500;
    font-size: 12px;
    color: rgb(68, 68, 68);
    text-transform: uppercase;
    padding: 20px;
    width: 100px;

}

td{
    padding: 20px; /* CHANGED FROM 15PX TO 20PX */
    width: 100px; 
    vertical-align:middle;
    font-weight: 300;
    font-size: 12px;
    color: rgb(59, 59, 59);
    border-bottom: solid 1px rgba(255,255,255,0.1);
}

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

＆＃13;

<section  class="container">
    <div class="tableheader" >
        <table cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Status</th>
                    <th>Time</th>
                    <th>Date</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="tablecontent">
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody class="tablecontent">
                <tr>
                    <td>Username</td>
                    <td>Name</td>
                    <td>Position</td>
                    <td>Status</td>
                    <td>Time</td>
                    <td>Date</td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td>Name</td>
                    <td>Position</td>
                    <td>Status</td>
                    <td>Time</td>
                    <td>Date</td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td>Name</td>
                    <td>Position</td>
                    <td>Status</td>
                    <td>Time</td>
                    <td>Date</td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td>Name</td>
                    <td>Position</td>
                    <td>Status</td>
                    <td>Time</td>
                    <td>Date</td>
                </tr>
            </tbody>        
        </table>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;