Блог

У меня есть демонстрация здесь, как я могу поместить некоторое пространство вокруг текстов в сторону таблицы? кроме того, почему класс css не работает в демо?

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

Причина, по которой это не сработало, заключалась в пробелах между классом и элементом.

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

Кроме того, чтобы добавить пространство, вам нужно добавить следующее (первое значение по вертикали, второе по горизонтали — этот пример дает 10 пикселей с обеих сторон):

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

Добавьте немного отступов:

 td {
    padding: 5px;
}
  

Поскольку строки even и odd не отображаются, просто удалите пробел между tr .even и tr .odd . С помощью пробела селектор CSS ищет потомка с even odd классом or . Без пробела вы говорите ему искать a tr с even odd прикрепленным к нему классом or.

С другой стороны, возможно, было бы лучше сгенерировать вашу таблицу программно, а не через HTML-строки; это немного проще в обслуживании:

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

...
  

Еще лучшим способом было бы поместить это в цикл:

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

Обновлена скрипка.

почему класс css не работает в демо?

Вы должны удалить пробел между tr и .odd, tr и .even

У меня есть демонстрация здесь, как я могу поместить некоторое пространство вокруг текстов в сторону таблицы?

Используйте заполнение Td см. Ответы выше

 /*
  tr.even amp; 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;
}
  

Демо можно найти здесь

одним выстрелом добавьте cellpadding в атрибут created table as or , если вы хотите поиграть с классами, также установите новое определение в вашем css для td, т.е. .recomendationsTable td { padding:'what ever you want';}

Поместите a DIV в ячейку, окружив текст, и добавьте DIV немного отступов.

или:

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