Question

我用ng-repeat填充表格，我想对表格中的特定行元素进行特定缩进，是否可以为数据表的不同行设置不同的填充？

<!-- HTML -->
<td ng-class = "{indent :true}" ></td> 

<!-- CSS -->
.indent { padding:0px;}.

表的元素采用表的默认样式，该样式存在于.table tbody tr td css class中。

Answer 1

本质：

<html>
    <head>
        <style>
            .padder td {
                padding:10px;
            }
        </style>
    </head>
    <body>
    <table>
        <tr class="padder">
            <td>I have padding</td>
            <td>I have padding</td>
            <td>I have padding</td>
        </tr>
        <tr>
            <td>I don't have padding</td>
            <td>I don't have padding</td>
            <td>I don't have padding</td>
        </tr>
            <tr>
            <td>I don't have padding</td>
            <td>I don't have padding</td>
            <td>I don't have padding</td>
        </tr>
    </table>
    </body>
<html>

Answer 2

您可以通过对行中的所有<td>标记应用填充来实现。像这样：

        .first {
            padding:10px;
        }
        .second {
            padding:20px;
        }
        .third {
            padding:30px;
        }

<table>
    <tr>
        <td class="first">first</td>
        <td class="first">first</td>
        <td class="first">first</td>
    </tr>
    <tr>
        <td class="second">second</td>
        <td class="second">second</td>
        <td class="second">second</td>
    </tr>
    <tr>
        <td class="third">third</td>
        <td class="third">third</td>
        <td class="third">third</td>
    </tr>
</table>

Answer 3

根据对这个问题很重要的评论信息，但无论如何你可能正在寻找这样的东西：

td[ng-class="{indent :true}"] {
  padding:10px;
  background-color: orange;
}

https://jsfiddle.net/cyLbopkd/1/

td[ng-class="{indent :true}"] {
  padding:10px;
  background-color: orange;
}

<table>
  <tr>
    <td ng-class="{indent :true}">Lorem ipsum</td>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
  </tr>
</table>

有没有办法为数据表的一行设置一组特定的样式？

3 个答案: