访问特定的表格单元格

时间：2017-10-17 12:15:37

标签： css

我有一个通过foreach生成的表（PHP）问题是我想修改这个表上的一些特定单元格（红色）知道我不能添加一个类，我必须用CSS样式访问它/ p>

编辑： 我需要在<td>类的最后一个<tr>的第一个和最后一个.child添加样式

实际上，这是一个ajax请求，用<tr>类创建.child所以有时有2 <tr>，有时10 <tr>

＆＃13;
＆＃13; 
.tb-child .child th, .tb-child .child td, .details-close {
    background: #f3f3f3;
    text-align: center;
}

tbody > tr.child:last-child > td:first-child {
  border-radius: 4px
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
  <table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
    <thead>
      <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
      </tr>
    </thead>
    <tbody>
      <tr class="5007963">
        <td id="5007963"></td>
        <td>
          <a rel="details">5007963</a>
        </td>
        <td>25</td>
        <td data-sort="0" class="sorting_1">
          <div>25</div>
        </td>
        <td data-sort="68">
          <div>42</div>
        </td>
        <td data-sort="-16">
          <div>21</div>
        </td>
        <td></td>
      </tr>
      <tr class="5012152">
        <td class="details-control details-close first-plan"></td>
        <td>
          <a rel="details">5012152</a>
        </td>
        <td>3000</td>
        <td data-sort="-22.23">
          <div>2333</div>
        </td>
        <td data-sort="-22.2">
          <div>2334</div>
        </td>
        <td data-sort="-29.63">
          <div>2111</div>
        </td>
        <td></td>
      </tr>
      <tr class="child 5012152">
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th></th>
      </tr>
      <tr class="child 5012152">
        <td></td>
        <td>
          <a rel="bin">
          AZERTY1
          </a>
        </td>
        <td>1000</td>
        <td data-sort="66.7">
          <div>1667</div>
        </td>
        <td data-sort="16.7">
          <div>1167</div>
        </td>
        <td data-sort="44.4">
          <div>1444</div>
        </td>
        <td></td>
      </tr>
      <tr class="child 5012152">
        <td style="background: red"></td>
        <td>
          <a rel="bin">
          AZERTY2
          </a>
        </td>
        <td>1000</td>
        <td data-sort="-33.3">
          <div>667</div>
        </td>
        <td data-sort="-33.3">
          <div>667</div>
        </td>
        <td data-sort="-66.7">
          <div>333</div>
        </td>
        <td style="background: red"></td>
      </tr>
      <tr class="5012277">
        <td id="5012277"></td>
        <td>
          <a rel="details">5012277</a>
        </td>
        <td>10</td>
        <td data-sort="-30" class="sorting_1">
          <div>7</div>
        </td>
        <td data-sort="-30">
          <div>7</div>
        </td>
        <td data-sort="-30">
          <div>7</div>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

jsiddle

我尝试了几件事：

tbody > tr.child:last-child > td:first-child {
  border-radius: 4px
}

但没有任何作用......怎么办？

1 个答案:

答案 0 :(得分：1)

这对你有用。

我已使用nth-last-child(2)将td标记为红色。

我添加的代码：

tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
  border-radius: 4px;
}

＆＃13;
＆＃13; 
.tb-child .child th, .tb-child .child td, .details-close {
    background: #f3f3f3;
    text-align: center;
}

tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
  border-radius: 4px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
  <table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
    <thead>
      <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
      </tr>
    </thead>
    <tbody>
      <tr class="5007963">
        <td id="5007963"></td>
        <td>
          <a rel="details">5007963</a>
        </td>
        <td>25</td>
        <td data-sort="0" class="sorting_1">
          <div>25</div>
        </td>
        <td data-sort="68">
          <div>42</div>
        </td>
        <td data-sort="-16">
          <div>21</div>
        </td>
        <td></td>
      </tr>
      <tr class="5012152">
        <td class="details-control details-close first-plan"></td>
        <td>
          <a rel="details">5012152</a>
        </td>
        <td>3000</td>
        <td data-sort="-22.23">
          <div>2333</div>
        </td>
        <td data-sort="-22.2">
          <div>2334</div>
        </td>
        <td data-sort="-29.63">
          <div>2111</div>
        </td>
        <td></td>
      </tr>
      <tr class="child 5012152">
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th></th>
      </tr>
      <tr class="child 5012152">
        <td></td>
        <td>
          <a rel="bin">
          AZERTY1
          </a>
        </td>
        <td>1000</td>
        <td data-sort="66.7">
          <div>1667</div>
        </td>
        <td data-sort="16.7">
          <div>1167</div>
        </td>
        <td data-sort="44.4">
          <div>1444</div>
        </td>
        <td></td>
      </tr>
      <tr class="child 5012152">
        <td style="background: red"></td>
        <td>
          <a rel="bin">
          AZERTY2
          </a>
        </td>
        <td>1000</td>
        <td data-sort="-33.3">
          <div>667</div>
        </td>
        <td data-sort="-33.3">
          <div>667</div>
        </td>
        <td data-sort="-66.7">
          <div>333</div>
        </td>
        <td style="background: red"></td>
      </tr>
      <tr class="5012277">
        <td id="5012277"></td>
        <td>
          <a rel="details">5012277</a>
        </td>
        <td>10</td>
        <td data-sort="-30" class="sorting_1">
          <div>7</div>
        </td>
        <td data-sort="-30">
          <div>7</div>
        </td>
        <td data-sort="-30">
          <div>7</div>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

但是有一些样式来自 bootstarap css ，所以如果你想过度使用它们，你也必须使用你的风格中的!important。

样本 - 

tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
  border-radius: 4px !important;
}

希望这对你有所帮助。

相关问题
最新问题