0

我正在尝试完成这个练习并且被卡住了。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
    }
4

1 回答 1

0

修改后的 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
}

请参阅此解决方案。

我已经更新了代码以使其看起来更好。

于 2013-02-23T07:55:45.087 回答