允许重叠元素并避免位移

I'm kinda stuck with this if someone could shed some light I'd be very grateful.

如果有人可以解决一些问题,我会对此感到困惑,我会非常感激。

Ok here I go.

好的,我走了。

I did this kind of custom table using a div for the table body, a nested one for the content and each cell is an span element.Everything is fine but one thing.

我使用表格体的div做了这种自定义表,内容是嵌套的,每个单元格都是span元素。一切都很好,但有一点。

What I try to achieve is when user hovers over a cell (span), if the content is too long (which a lot actually are) to fit in the width,it pop ups itself and show the content in some kind of tooltip.

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

Actually already achieve the purpouse,well kind of, but the cell(span) displaces the content of the row if the content is larger, and that's the point of asking,How can avoid that behaviour? How can I allow the content overlap the rest of the row and avoid displacement?

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

For a better explanation check this fiddle : http://jsfiddle.net/fuyn14en/2/

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

Here's the code (same as in the fiddle).

这是代码(与小提琴相同)。

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>

and 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;
}

Please ask if something is missing or not clear :)

请问是否遗漏或不清楚:)

Any idea or suggestion ?

有什么想法或建议吗?

2 个解决方案

#1

try something like this,

尝试这样的事情,

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:hover{

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

}

#2

Here's my attempt: http://jsfiddle.net/fuyn14en/7/

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

The edits I've made are:

我所做的编辑是:

Removed content: attr(title); from cell hover (I'll explain this below)

删除内容:attr(标题);从细胞悬停(我将在下面解释)

Added display: inline; to cell hover.

添加显示:内联;细胞悬停。

Changed position: static; to position: absolute; on cell hover. This is the main property that prevents other elements being pushed forward. When this is positioned absolutely, all other elements basically don't recognize that it exists.

改变位置:静态;定位:绝对;在细胞悬停。这是阻止其他元素向前推进的主要属性。当绝对定位时,所有其他元素基本上不会识别它存在。

Added a selector for .tablaFilaContenido:hover + .tablaFilaContenido. This is the adjacent selector. When we hover over a cell, we are giving it absolute positioning, and all elements after it are being pulled backwards. By using this selector we can push them back to where they are supposed to be. I made it so when you hover over a cell, the next cell is given margin-left: 11% (the width of the previous cell), and padding-left: 15px (the padding of the previous cell + the left padding of this cell.

为.tablaFilaContenido添加了一个选择器:hover + .tablaFilaContenido。这是相邻的选择器。当我们将鼠标悬停在一个单元格上时,我们会给它绝对定位,然后将所有元素向后拉。通过使用这个选择器,我们可以将它们推回到它们应该的位置。当你将鼠标悬停在一个单元格上时,我就这样做了,下一个单元格给出了margin-left:11%(前一个单元格的宽度),padding-left:15px(前一个单元格的填充+左边的填充)细胞。

I had to remove "content: attr(title);" because when you remove the mouse away from a specific table cell (after hovering over it), the margin and padding applied with .tableFilaContenido:hover+.tablaFilaContenido would be retained, leaving cells out of place.

我不得不删除“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; 
    }

#1