从XML数据创建CSS表

Question

所以我一直试图让我们丑陋的XML数据库看起来很好，当我们追溯时，到目前为止我已经设法将一半的数据放到一个表中，我想做的是让另一半进入相同的桌子，相邻，将接受任何其他设计的想法，我没有图形化的头脑所以我被困在哪里去;

/* common.css */
UserDetails { display: inline }

UserName, TimeStamp, RequestType{ 
    font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
    border-bottom: 1px solid #ccc;
    display: block;
}
UserName::before { 
    content: "Created by: ";
    font-weight: bold;
}
TimeStamp::before { 
    content: "Time Stamp: ";
    font-weight: bold;
}
RequestType::before { 
    content: "Request Type: ";
    font-weight: bold;
}
OrderDetails>OrderID {
    color: black;
    display: block;
    font-weight: bold;
}
OrderDetails>OrderID::before {
    content: "Order Details for: ";
}
OrderDetails>*{
    color: red;
    display: block;
}
OrderDetails>*{
    display:table;         
    width:auto;         
    background-color:#eee;         
    border:1px solid  #666666;         
    border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
OrderDetails>*>Name::before {
    content: "Product: ";
}
OrderDetails>*>Name{
    float:left;/*fix for  buggy browsers*/
    display:table-column;         
    width:200px;         
    background-color:#ccc;  
}
OrderDetails>*>Quantity::before {
    content: "Amount: ";
}
OrderDetails>*>Quantity{
    float:left;/*fix for  buggy browsers*/
    display:table-column;         
    width:200px;         
    background-color:#ccc;  
}
PDetails::before{
    content: "Address: ";
    font-weight:bold;
}
PDetails>*{
    display:block;  
}
PDetails>Address>*{
    display:block;  
}
CustomerDetails>Name::before{
    content: "Name: ";
    font-weight:bold;
}
CustomerDetails>AccNo::before{
    content: "Account Number: ";
    font-weight:bold;
}
CustomerDetails>Telephone::before{
    content: "Telephone Number: ";
    font-weight:bold;
}
CustomerDetails>Address::before{
    content: "Address: ";
    font-weight:bold;
}
CustomerDetails>*{
    display:block;  
}
CustomerDetails>Address>*{
    display:block;  
}
CustomerDetails::after{
    content: "Packages: ";
    font-weight:bold;
}
ShipmentDetails>*{
    display:block;
}
ShipmentDetails>*>HeightCM::before{
    content:"Height: ";
}
ShipmentDetails>*>HeightCM::after{
    content:"cm";
}
ShipmentDetails>*>LengthCM::before{
    content:"Length: ";
}
ShipmentDetails>*>LengthCM::after{
    content:"cm";
}
ShipmentDetails>*>WidthCM::before{
    content:"Width: ";
}
ShipmentDetails>*>WidthCM::after{
    content:"cm";
}
ShipmentDetails>*>WeightKG::before{
    content:"Weight: ";
}
ShipmentDetails>*>WeightKG::after{
    content:"kg";
}
ShipmentDetails>PackageCount::before{
    content:"Packages: ";
    font-weight:bold;
}

我的jsfiddle与xml： http://jsfiddle.net/x54o3a9h/