HTML，CSS甚至JQUERY-在表格中隐藏第一个和最后一个图标

Question

我有一张桌子，其中一个像这样：

<td class="acciones" width="20%">
     <span class="btn-group-action">
     <!-- EDITAR -->
     <span data-toggle="tooltip" class="btn-group label-tooltip" data-original-title="Editar" data-html="true" data-placement="left">                                                    
                                                    <!-- <a class="btn btn-default " href="<?php echo base_url('diccionarios/elemento_especifico_diccionario').'/'.$elemento['ELDI_Id'];?>" title="Editar">
                                                        <i class="material-icons">edit</i>
                                                    </a> -->
                                                    <a class="btn btn-default editar_elemento_diccionario" title="Editar">
    <i class="material-icons">edit</i>
  </a>
 </span>
<!-- BORRAR -->
<span class="btn-group label-tooltip eliminar_elemento_diccionario" id='<? 
   php echo $elemento['ELDI_Id']; ?>' title="Eliminar" data-toggle="tooltip">
   <a class="btn btn-default" href="#"><i class="material-icons">delete</i> 
   </a>  
</span>  
</span>

 <span class="btn-group-action" style="margin-right:3.46px">
 <!-- BAJAR POSICIÓN -->
 <span data-toggle="tooltip" class="btn-group label-tooltip" data-original- 
   title="Bajar posición" data-html="true" data-placement="left">                                                    
   <a class="btn btn-default bajar_posicion_elemento" title="Bajar 
 posición">
<i class="material-icons">arrow_drop_down</i>
</a>
</span>
<!-- SUBIR POSICIÓN -->
<span data-toggle="tooltip" class="btn-group label-tooltip" data-original- 
title="Subir posición" data-html="true" data-placement="left">                                                    
<a class="btn btn- 
default subir_posicion_elemento" title="Subir posición">
<i class="material- 
icons">arrow_drop_up</i>
 </a>
</span> 
 </span>
 </td>

我需要这样做：

• 如果第一个是td，则必须将其subir_posicion_elemento隐藏。
• 如果td是最后一个td，则必须将其bajar_posicion_elemento隐藏。

我不知道该怎么做，我尝试了CSS，但无法正常工作。

谢谢你的时间。

编辑

显示需要隐藏的图标的图像 ： 在此处输入图像描述

EDIT2

好的，我终于弄清楚了，所以这是答案，很简单，但是我对css>不了解。

CSS：

tr:first-child .subir_posicion_elemento, tr:last-child .bajar_posicion_elemento {
display:none;
}

Answer 1

使用此CSS代码隐藏表中的第一个和最后一个图标：

 table tr td:first-child .subir_posicion_elemento{ 
        display:none;
    }
    table tr td:last-child .bajar_posicion_elemento { 
        display:none;
    }

Answer 2

好的，我终于弄清楚了，所以这是答案，很简单，但是我对css>不了解。

CSS：

tr:first-child .subir_posicion_elemento, tr:last-child .bajar_posicion_elemento {
display:none;
}

谢谢！

Answer 3

像这样？

table tbody tr td:nth-child(1) .subir_posicion_elemento {
 visibility:hidden; 
}
table tbody tr td:nth-last-child(1) .bajar_posicion_elemento {
visibility:hidden;
}

https://codepen.io/vommbat/pen/yqEBPd