Question

在悬停每个表格行时，会出现编辑和删除按钮。现在他们有自己的专用单元，即使看不到它们也占据空间。我想要的是让他们出现在桌子排上。如果它们出现时与表行的内容重叠，则很好。我想要一个类似于css的效果{position：fixed;右：0像素}

由于

<table class='t'>
    <tr><td>Name 1</td><td>10</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 2</td><td>20</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 3</td><td>30</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 4</td><td>40</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 5</td><td>50</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 6</td><td>60</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
</table>

Answer 1

找到了一种方法。 http://jsfiddle.net/L2n7M/

.t tr td.actions  {visibility:hidden;position:absolute;margin-left:-70px}
.t tr:hover td.actions  {visibility:visible}

如果有人知道更好的主意，请告诉我。谢谢阿伦

Answer 2

抱歉不喜欢桌子:) 但试试这个：jsfiddle

<div class="wrapper">
    <div class="row">
         <span>
             Name 1
        </span>
        <span>
            10
        </span> 
        <span class='actions'>
            <button>Edit</button><button>Delete</button>
        </span>  
        <span>
            Some Text here
        </span> 
    </div>
      <div class="row">
         <span>
             Name 2
        </span>
        <span>
            20
        </span> 
          <span class='actions'>
            <button>Edit</button><button>Delete</button>
        </span> 
          <span>
            The quick Brown fox jump over the lazy dog
        </span> 
    </div>
</div>

将HTML表格单元格浮动/定位到右侧与先前单元格重叠

2 个答案: