How can I put some space around td text?

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: #8EA4B开发者_如何学CB;
border:#2F5882 1px solid;
}
.recomendationsTable tr .even{
color :#2F5882;
background-color: #EDF1F5;
border:#2F5882 1px solid;
}

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;   
}

Add some padding:

td {
    padding: 5px;
}

As far as the even and odd rows not showing up, just remove the space between tr .even and tr .odd. With the space, the CSS selector is looking for a descendant with the even or odd class. Without the space, you're telling it to look for a tr with an even or odd class attached to it.

On another note, it might be better to generate your table programmatically instead of through HTML strings; it's a little easier to maintain:

var $table = jQuery("<table></table>").attr("class", "recommendationsTable");

var $tr = jQuery("<tr></tr>");
$tr.append(jQuery("<th></th>".attr("align", "left").text("Recommendation(s)"));
$table.append($tr);

$tr = jQuery("<tr></tr>").attr("class", "even");
$tr.append(jQuery("<td></td>").text(ruleactionresult1));
$table.append($tr);

...

An even better way would be to put this into a loop:

var rules = ["bbbbb", "aaaa"];
var classes = ["even", "odd"];
var i = 0;

var $table = jQuery("<table></table>").attr("class", "recommendationsTable");

var $tr = jQuery("<tr></tr>");
$tr.append(jQuery("<th></th>".attr("align", "left").text("Recommendation(s)"));
$table.append($tr);

for(var i = 0; i < 5; i++) {
    $tr = jQuery("<tr></tr>").attr("class", class[i % 2]);
    $tr.append(jQuery("<td></td>").text(rules[i % 2]));
    $table.append($tr);
}

Updated fiddle.

why not the css class is working in the demo ?

You should remove the space between tr and .odd, tr and .even

I have a demo here how can I put some space around the texts in side the table?

Use Td padding see answers above

/*
  tr.even & tr.odd (joined)
  means tr with the evenodd class applied
  if there is a space, it means an element within the tr element
*/
.recomendationsTable tr.odd {
    color :#FFFFFF;
    background-color: #8EA4BB;
    border:#2F5882 1px solid;
}
.recomendationsTable tr.even {
    color :#2F5882;
    background-color: #EDF1F5;
    border:#2F5882 1px solid;
}

/* Also, add some padding between the cell's border and the text */
.recomendationsTable tr th,
.recomendationsTable tr td {
    padding: 2px;
}

Demo can be found here

in one shot add cellpadding to the created table as attribute or if you want to play with classes set new definition in your css to the td also i.e. .recomendationsTable td { padding:'what ever you want';}

Put a DIV in the cell, surrounding the text and give the DIV some padding.

or:

table tr td, table tr th { padding: 5px; }