Struggling with styling an XML file into a table using CSS. Despite multiple attempts, I just can't seem to achieve the desired look.
Provided below is my XML code. Seeking assistance from anyone who can offer a solution to this perplexing issue.
<?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>
The existing CSS code that does not meet the desired outcome:
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;
}
Desired layout specifications include:
- Four headers in the first line
- All content should be centered (both headers and data)
- Cells maximize space in each column
- Each column occupies 25% of the total width