#css
#css
Вопрос:
У меня есть демонстрация здесь, как я могу поместить некоторое пространство вокруг текстов в сторону таблицы? кроме того, почему класс 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;
}
Комментарии:
1. используйте атрибут cellpadding внутри таблицы.
Ответ №1:
Причина, по которой это не сработало, заключалась в пробелах между классом и элементом.
.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;
}
Ответ №2:
Добавьте немного отступов:
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);
}
Ответ №3:
почему класс css не работает в демо?
Вы должны удалить пробел между tr и .odd, tr и .even
У меня есть демонстрация здесь, как я могу поместить некоторое пространство вокруг текстов в сторону таблицы?
Используйте заполнение Td см. Ответы выше
Ответ №4:
/*
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;
}
Демо можно найти здесь
Комментарии:
1. И, как уже упоминали другие, лучше использовать jQuery для создания вашей таблицы , а не вставлять HTML.
Ответ №5:
одним выстрелом добавьте cellpadding
в атрибут created table
as or
, если вы хотите поиграть с классами, также установите новое определение в вашем css для td, т.е. .recomendationsTable td { padding:'what ever you want';}
Ответ №6:
Поместите a DIV
в ячейку, окружив текст, и добавьте DIV
немного отступов.
или:
table tr td, table tr th { padding: 5px; }