Question

我有一个演示here如何在桌子旁边的文本周围放置一些空格？为什么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;
}

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

此外，要添加空间，您需要添加以下内容（第一个值垂直填充，第二个水平 - 此示例在两侧都提供10px）：

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

Answer 2

添加一些填充：

td {
    padding: 5px;
}

至于even和odd行未显示，只需删除tr .even和tr .odd之间的空格即可。使用空格，CSS选择器正在寻找具有even或odd类的后代。如果没有空格，您就会告诉它要查找附加了tr或even类的odd。

另一方面，以编程方式而不是通过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);
}

Updated fiddle

Answer 3

为什么css类不在演示中？

你应该删除tr和.odd，tr和.even之间的空格

我在这里有一个演示如何在桌子旁边的文本周围留一些空间？

使用Td填充查看上面的答案

Answer 4

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

演示可以是found here

Answer 5

一次性将cellpadding添加到创建的table属性中 or如果您想使用类，请将css中的新定义设置为td，即.recomendationsTable td { padding:'what ever you want';}

Answer 6

在单元格中放置DIV，围绕文本，并为DIV添加一些填充。

或：

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

如何在td文本周围放置一些空格？

6 个答案: