html - 将 HTML 表格单元格浮动/定位到与前一个单元格重叠的右侧

Question

请看一下http://jsfiddle.net/3kV3Z/

在每个表格行悬停时，会出现编辑和删除按钮。现在他们有自己的专用牢房，即使不可见也能占据空间。我想要的是让他们出现在表格行上。如果它们出现时与表格行的内容重叠，那很好。我想要一个类似于 css {position:fixed; 右：0px}

谢谢

<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>