如何使用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。

我已經更新了代碼，使它看起來更好。