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。

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

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

1 个答案: