CSS样式调整需求：为td-fault添加底部白边框并优化文本显示

嘿，我帮你搞定这些样式问题，让你的表格回到理想状态～ 先说说你之前遇到的核心问题：CSS选择器写错了、表格结构嵌套错误，导致样式无法正确生效。下面是修正后的代码和详细说明：

问题分析 #

1. CSS选择器错误：你用table-eng这种写法是在选名为<table-eng>的元素，但实际HTML里它是ID（id="table-eng"），应该用#table-eng；同理td-fault是类，要写成.td-fault。
2. 表格结构混乱：你在循环里错误地用<div>包裹了表格的部分行，破坏了表格的DOM结构，这会导致样式和排版异常。
3. 样式范围错误：你给所有<td>都加了底部边框，而不是只给带td-fault类的元素；同时公司名称和工号的颜色设成了绿色，需要改成白色。

修正后的CSS代码 #

/* 全局背景设置 */
body { 
    background-color: black; 
    margin: 0; /* 去掉浏览器默认边距 */
}

/* 工程师标题区域样式 */
#table-eng p {
    width: 100%; /* 修正之前650%的错误宽度，这个值会导致内容溢出 */
    font-size: 15pt;
    color: #ffffff;
    margin: 0; /* 去掉p标签默认的上下边距 */
}

#table-eng table {
    border-collapse: collapse; /* 合并表格边框，避免多余间隙 */
    width: 100%;
}

/* 客户信息表格样式 */
#table-cust table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0; /* 给每个客户表格增加上下间距，区分度更好 */
}

#table-cust th {
    font-size: 13pt;
    color: #ffffff; /* 把公司名和工号改成白色 */
    text-align: left; /* 统一左对齐，确保在同一行 */
    padding: 8px 0; /* 增加内边距，让内容不拥挤 */
}

#table-cust th:last-child {
    text-align: right; /* 工号右对齐，视觉上更整齐 */
}

/* 故障描述单元格专属样式 */
.td-fault {
    font-size: 11pt;
    color: #ffffff;
    border-bottom: 1px solid white; /* 仅给这个类的td加底部白边框 */
    padding: 8px 0;
}

修正后的HTML/PHP代码 #

<html>
<head>
    <!-- 把link标签放到head里，符合HTML规范 -->
    <link href="../css/job-board.css" rel="stylesheet">
</head>
<body>
    <?php 
    include('connectionDB.php'); 
    $sql = "SELECT * FROM [Support_DB].[dbo].['Job info$'] WHERE [Job Completed?]= 0 AND [Attended by]='James'";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    $results=$stmt->fetchAll(PDO::FETCH_ASSOC);
    ?>

    <!-- 工程师标题区域 -->
    <div id='table-eng'>
        <table>
            <tr>
                <th>
                    <p>James</p>
                </th>
            </tr>
        </table>
    </div>

    <?php foreach ($results as $row) { ?>
        <!-- 每个客户的信息表格，结构完整无错误嵌套 -->
        <div id='table-cust'>
            <table>
                <tr>
                    <!-- 公司名称和工号在同一行的th中，确保不换行 -->
                    <th><?php echo $row['Customer']; ?></th>
                    <th><?php echo $row['Job Number']; ?></th>
                </tr>
                <tr>
                    <!-- 故障描述单元格用colspan="2"占满整行，同时添加td-fault类 -->
                    <td class='td-fault' colspan="2">
                        <?php echo wordwrap($row['Fault'],85,"<br>\n",TRUE); ?>
                    </td>
                </tr>
            </table>
        </div>
    <?php } ?>
</body>
</html>

关键修改点说明 #

• 选择器修正：把错误的元素选择器改成#（ID）和.（类）前缀，确保样式精准命中目标元素。
• 结构修复：移除了循环中错误的<div>嵌套，保证表格的<tr>、<th>、<td>完全包裹在<table>内，符合HTML规范。
• 样式调整：
  • 仅给.td-fault类的<td>添加底部白色边框，其他单元格不受影响。
  • 将公司名称和工号的颜色改为白色，通过colspan="2"让故障描述占满整行，同时调整对齐方式让排版更流畅。
• 细节优化：修正了不合理的宽度值，添加内边距和间距，提升整体视觉体验。

内容的提问来源于stack exchange，提问作者James