0

この演習を完了しようとしていますが、行き詰まっています。HTMLの方がはるかに簡単ですが、CSSとXMLの演習です。最初の行（境界線あり）のセルを下（境界線なし）のセルに揃える必要があります。私は列のプロパティ、ヘッダー、キャプションを試しましたが、何もうまくいきません。前もって感謝します。ところで、私はCSSファイルしか変更できません。最初の3つのセルに、シアンが露出していない実線の境界線がある場合は、機能します。そのままではかなり醜いですが、レンダリングできる限り近くにあります。

<?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 に答える