如何使用CSS表格对齐CSS和单元格/列？

Question

我正在尝试完成此练习并卡住了。 HTML会容易得多，但它是一个CSS和XML练习。我需要将第一行（具有边框）的单元格与下面的单元格（无边框）对齐。我已经尝试过列属性，标题，标题，没有什么可以获得它。提前致谢。顺便说一句，我只能修改CSS文件。如果三个第一个单元格具有固体边界而青色未曝光，则它将起作用。这是非常丑陋的，但尽可能接近我可以渲染。

<?xml version="1.0" standalone="yes"?> 
<?xml-stylesheet type="text/css" href="final.css"?> 
<document> 
    <headers> 
    <header>First Name</header> 
    <header>Last Name</header> 
    <header>Loan Amount</header> 
    </headers> 
    <mortgages> 
    <mortgage> 
     <firstName> Ryan </firstName> 
     <lastName> Folks </lastName> 
     <amount>$200,000</amount> 
    </mortgage> 
    <mortgage> 
     <firstName> Edward </firstName> 
     <lastName> Jordan </lastName> 
     <amount>$220,000</amount> 
    </mortgage> 
    <mortgage> 
     <firstName> Desmond </firstName> 
     <lastName> Smith </lastName> 
     <amount>$230,000</amount> 
    </mortgage> 
    <mortgage> 
     <firstName> Terrell </firstName> 
     <lastName> Wilson </lastName> 
     <amount>$240,000</amount> 
    </mortgage> 
    <mortgage> 
     <firstName> Julius </firstName> 
     <lastName> Smith </lastName> 
     <amount>$250,000</amount> 
    </mortgage> 
    </mortgages> 
</document> 

document{ 
    display:table; 
    border-collapse:collapse; 
    border: 3px solid black; 
    table-layout:auto; 
    margin: 2em; 
    } 
headers 
{ 
display: table-row; 
text-align:center; 
background-color: cyan; 
} 
header 
{display:table-header; 
border: 3px solid black; 
} 
mortgage 
{ 
display: table-row; 
border-bottom: 1px solid black; 
} 
firstName, lastName, amount{ 
    display:table-cell; 
    padding: 1em; 
    text-align:center 
    } 

Answer 1

修改CSS：

document{ 
    display:table; 
    border-collapse:collapse; 
    border: 3px solid black; 
    table-layout:auto; 
    margin: 2em; 
    } 
headers{ 
    width:100%; 
    display:inline-block; 
    text-align:center; 
    background-color: cyan; 
} 
header 
{ 
    display:block; 
    float:left; 
    padding: 6px; 
    text-align:center; 
    border-collapse:collapse; 
    border: 1px solid black; 
} 
mortgage{ 
    display: table-row; 
    border-bottom: 1px solid black; 
} 
firstName, lastName, amount{ 
    display:table-cell; 
    padding: 1em; 
    text-align:center 
} 

参考this solution。

我已经更新了代码，使它看起来更好。