css - 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。其余的你可以用宽度来控制。