Question

如果有人可以说清楚我会非常感激，我有点坚持这个。

好的，我走了。

我使用表格主体的div做了这种自定义表格，内容是嵌套的每个细胞都是一个跨度元素。一切都很好，但有一点。

我试图实现的是当用户在单元格（跨度）上盘旋时，如果内容太长（实际上很多）以适应宽度，它会自动弹出并以某种形式显示内容工具提示。

实际上已经很好地实现了purpouse，但是如果内容较大，则单元格（span）取代了行的内容，这就是问题，如何避免这种行为？如何允许内容与行的其余部分重叠并避免位移？

为了更好的解释，请检查这个小提琴：http://jsfiddle.net/fuyn14en/2/

这里是代码（与小提琴相同）。

HTML：

<div id="tabla">
     <div id="tablaContenido">
          <div class="tablaFila">
               <span class="tablaFilaContenido">Short Content</span>                    
               <span class="tablaFilaContenido">Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrge Content makes the row displace how can i overlap so all other cells keep where they suppose to be?</span>
               <span class="tablaFilaContenido">Short Content</span>
               <span class="tablaFilaContenido">Short Content</span>
               <span class="tablaFilaContenido">Short Content</span>
               <span class="tablaFilaContenido">Short Content</span>  
               <span class="tablaFilaContenido">Short Content</span>
          </div>
     </div>
</div>

和CSS：

#tabla{
       width: 100%;
       height: 100%;
       display: table;
       padding-bottom: 20px;
       position: relative;
       display: inline;
}

.tablaFila{
    width: 100%;
    height: 15px;
    float: left;
    display: table-row;
    margin: 0;
    border: 0;
    padding: 0; 
}

.tablaFilaContenido{
    margin: 0;
    border: 0;  
    padding: 5px 5px;
    width: 11%; 
    white-space: nowrap;    
    float: left;
    display: table-cell;
    font-size: 10px;
    overflow: hidden;
    position: relative;
}

.tablaFilaContenido:hover{ 
     background-color: #B2FF66;
     content: attr(title);
     z-index: 1;  
     display: block;
     width: auto;                
     position: static;
}

请询问是否遗漏或不清楚：）

有任何想法或建议吗？

Answer 1

尝试这样的事情，

HTML

<head>
<link rel="stylesheet" type="text/css" href="7.css" />
</head>
<body> 
      <div class="tablaFila">
           <span class="tablaFilaContenido">Short Content</p></span>                    
           <span class="tablaFilaContenido">Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrge Content makes the row displace how can i overlap so all other cells keep where they suppose to be?</p></span>
           <span class="tablaFilaContenido">Short Content</p></span>
           <span class="tablaFilaContenido">Short Content</p></span>
           <span class="tablaFilaContenido">Short Content</p></span>
           <span class="tablaFilaContenido">Short Content</p></span>  
           <span class="tablaFilaContenido">Short Content</p></span>
      </div>


 <body>
</html>

CSS

#tabla{
   width: 100%;
   height: 100%;
   display: table;
   padding-bottom: 20px;
   position: absolute;
   display: inline;

}

.tablaFila {

width: 100%;
height: 15px;
float: left;
display: table-row;
margin: 0;
border: 0;
padding: 0;

}

.tablaFilaContenido {

margin: 0;
border: 0;  
padding: 5px 5px;
width: 11%; 
white-space: nowrap;    
float: left;
display: table-cell;
font-size: 10px;
overflow: hidden;
position: relative;

}

.tablaFilaContenido：悬停{

 background-color: #B2FF66;
 content: attr(title);
 z-index: 1;  
 display: inline;
 width: auto;                
 position: absolute;

}

Answer 2

这是我的尝试：http://jsfiddle.net/fuyn14en/7/

我所做的编辑是：

删除内容：attr（标题）;从细胞悬停（我将在下面解释）
添加显示：内联;细胞悬停。
改变位置：静态;位置：绝对;在细胞悬停。这是阻止其他元素向前推进的主要属性。当绝对定位时，所有其他元素基本上都不会识别它存在。
为.tablaFilaContenido添加了一个选择器：hover + .tablaFilaContenido。这是相邻的选择器。当我们将鼠标悬停在一个单元格上时，我们会给它绝对定位，然后将所有元素向后拉。通过使用这个选择器，我们可以将它们推回到它们应该的位置。当你将鼠标悬停在一个单元格上时，我就这样做了，下一个单元格给出了margin-left：11％（前一个单元格的宽度），padding-left：15px（前一个单元格的填充+左边的填充< em>这个单元格。

我不得不删除“content：attr（title）;”因为当您将鼠标从特定的表格单元格移开时（将鼠标悬停在其上方）后，将保留使用.tableFilaContenido：hover + .tablaFilaContenido的边距和填充，从而使单元格不合适。

    .tablaFilaContenido:hover {
        background-color: #B2FF66;
         z-index: 1;  
         display: inline;
         width: auto;
         position: absolute;
    }

    .tablaFilaContenido:hover + .tablaFilaContenido { 
        margin-left: 11%; 
        padding-left: 15px; 
    }

允许重叠元素并避免位移

2 个答案: