需要 XML 表的 CSS 编码

Question

我的问题是我必须使用CSS将XML文件样式化为表。我已经尝试了一切，但我仍然无法按照我喜欢的方式得到它。

下面是我的XML编码。任何可以帮助我找到解决这种头痛的方法的人。

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="record.css" ?>
 <Record>
<data> 
<data-header> StudentId </data-header> 
<data-header> Surname </data-header> 
<data-header> Name </data-header> 
<data-header> Course </data-header> 
</data>
<data> 
<data-cell> 00123 </data-cell> 
<data-cell> Jack </data-cell>
<data-cell> Jim </data-cell> 
<data-cell> BSc </data-cell> 
</data>
<data> 
<data-cell> 00124 </data-cell> 
<data-cell> Jenny </data-cell>
<data-cell> Janet </data-cell> 
<data-cell> Diploma </data-cell>
</data>
 </Record>

这是我的CSS（这不是我想要的方式）：

Record { 
    display:table; 
    font-size:14px; 
    margin:8px; 
    font-family: Verdana; display:block 
} 
data{ 
    display:block; 
    text-align:center; 
    border: 1px solid silver; 
    padding:10px; 
    background-color:whitesmoke; 
} 
data-cell,data-header { 
    display: table-cell; 
    border: solid 1px; 
}

这就是我希望它看起来像的样子：

• 第一行是 4 个标题
• 所有内容都应居中（标题和数据在其下）
• 单元格应使用列中的所有空间
• 每列应占总数的 25%。

Answer 1

试试这个：

Record { 
    display:table; 
    font-size:14px; 
    margin:8px; 
    font-family: Verdana; 
    width: 100%;
} 
data{ 
    display:table-row; 
    text-align:center; 
    border: 1px solid silver; 
    padding:10px; 
    background-color:whitesmoke; 
} 
data-cell,data-header { 
    display: table-cell; 
    border: solid 1px; 
    width: 25%;
}

并在这里进行实验 JSFiddle

您使用的是block而不是table-row。其余的你可以控制 width .