Question

I have a demo here how can I put some space around the texts in side the table? also why not the css class is working in the demo?

css

.recomendationsTable{
width:100%;overflow:hidden;
}
.recomendationsTable tr{
border:#2F5882 1px solid;
} 
.recomendationsTable tr th{
color :#ffffff;
background-color: #93A8BF;
}
.recomendationsTable tr .odd{
color :#FFFFFF;
background-color: #8EA4BB;
border:#2F5882 1px solid;
}
.recomendationsTable tr .even{
color :#2F5882;
background-color: #EDF1F5;
border:#2F5882 1px solid;
}

Answer 1

The reason it didn’t work was because of the spaces between the class and the element.

.recomendationsTable {
    width:100%;overflow:hidden;
}

.recomendationsTable tr {
    border:#2F5882 1px solid;
}

.recomendationsTable tr th {
    color :#ffffff;
    background-color: #93A8BF;
}

.recomendationsTable tr.odd {
    color :#FFFFFF;
    background-color: #8EA4BB;
    border:#2F5882 1px solid;
}

.recomendationsTable tr.even {
    color :#2F5882;
    background-color: #EDF1F5;
    border:#2F5882 1px solid;
}

Additionally, to add space you need to add the following (first value vertical padding, second horizontal – this example gives 10px on both sides):

.recomendationsTable tr td {
    padding: 0 10px;   
}