css - 我怎样才能在 td 文本周围放置一些空间？

Question

我有一个演示 here我怎样才能在 table 旁边的文字周围留出一些空间？还有为什么 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;   
}