如何将表头文本与表格正文文本对齐？

Question

我只是想不通如何将标题中的文本与正文标题中的文本左对齐，表格是可滚动的。

.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); 
}

<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>

您可以看到，表头文本对齐方式与表格主体对齐方式不同。我似乎找不到问题所在。我已经尝试编辑 th 和 tr 的填充和宽度，但没有效果。

- Ivan Sim

---

FYI.. 我已经移除了 PHP 标签，因为这与 PHP 无关。 - Jigar Shah

Answer 1

这是因为您设置了th和td的不同padding。

尝试这样做：

.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); 

<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>

- cyt

---

哦...糟糕，是个小错误。谢谢。 - Ivan Sim

Answer 2

将你的td内边距属性调整为与th相同。在你的示例中，td的内边距为15px，而th为20px。它负责左缩进，所以将其调整为相同。在我的下面的示例中，它被设置为20px。考虑在一个地方完成这个操作，比如：

td, th { padding: 20px; }

工作示例：

 .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);
}

<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>

- wscourge

---

哦...糟糕，是个小错误。谢谢。 - Ivan Sim