如何在显示隐藏文本时防止表行重新调整大小？

Question

当您将父元素悬停时，我将此框显示为提示框。在表格单元格外部实现相同的代码时没有问题，但在表格单元格中，整个行在悬停文本时重新调整大小，因为新文本已添加到行中。

我该如何防止这种情况？

HTML：

<table border="1" cellspacing="0px" class="dtable">
<tr id="th">
<td>Name</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td class="hoverbox">Some text<span>Hidden text</span></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>

CSS：

# CSS for the table
.dtable {
     margin: 0px auto;
     border:1px solid #ccc;
     border-collapse: collapse;
     text-align: center;
     border-color: black;
     font-weight: bold;
     width: 100%;
}

.dtable tr:nth-child(odd){background-color:#303030}
.dtable tr:nth-child(even){background-color:#333333}

.dtable #th {
     background-color: #000;
     font-family: eurostile;
}

.dtable td {
     padding: 15px 0px;
     font-family: eurostile;
}

# CSS for the hidden text
.hoverbox span {
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display: none;
    #padding:0 20px;
}

.hoverbox span:after {
    content:'';
    position:absolute;
    bottom:-10px; 
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.hoverbox:hover span {
    display:block;
}

这是fiddle

提前致谢。

Answer 1

试试这个代码段

＆＃13;

＆＃13;

$arr = json_decode($json); // $json is your JSON.
foreach($arr->menu[0]->starter as $starter){
  echo '<h3>'.$starter->name.'</h3><br><p>'.$starter->price.'</p><br>';
}

＆＃13;

.dtable {
	 margin: 0px auto;
     border:1px solid #ccc;
	 border-collapse: collapse;
	 text-align: center;
	 border-color: black;
	 font-weight: bold;
	 width: 100%;
}

.dtable tr:nth-child(odd){background-color:#303030}
.dtable tr:nth-child(even){background-color:#333333}

.dtable #th {
     background-color: #000;
	 font-family: eurostile;
}

.dtable td {
     padding: 15px 0px;
	 font-family: eurostile;
}

.hoverbox span {
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display: none;
    #padding:0 20px;
}

.hoverbox span:after {
    content:'';
    position:absolute;
    bottom:-10px; 
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.hoverbox:hover span {
    display:block;
     position:absolute;
     z-index: 9;
     top: 0;
     left: 50%;
}

＆＃13;

＆＃13;

＆＃13;

您必须将绝对位置添加到跨度本身，而不是<table border="1" cellspacing="0px" class="dtable"> <tr id="th"> <td>Name</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td class="hoverbox">Some text<span>Hidden text</span></td> <td>-</td> <td>-</td> <td>-</td> </tr> </table>，如下所示：

.hoverbox span:after

Answer 2

您需要在工具提示上的position: relative和td上设置absolute。试试这个（我将位置设置为0，所以你可以看到它）：

.dtable {
  margin: 0px auto;
  border: 1px solid #ccc;
  border-collapse: collapse;
  text-align: center;
  border-color: black;
  font-weight: bold;
  width: 100%;
}

.dtable tr:nth-child(odd) {
  background-color: #303030
}

.dtable tr:nth-child(even) {
  background-color: #333333
}

.dtable #th {
  background-color: #000;
  font-family: eurostile;
}

.dtable td {
  padding: 15px 0px;
  font-family: eurostile;
}

.hoverbox span {
  background: #F8F8F8;
  border: 5px solid #DFDFDF;
  color: #717171;
  font-size: 13px;
  height: 30px;
  letter-spacing: 1px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0px;
  left: 0px;
  display: none;
  #padding: 0 20px;
}

.hoverbox {
  position: relative;
}

.hoverbox span:after {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 10px;
  height: 10px;
  border-bottom: 5px solid #dfdfdf;
  border-right: 5px solid #dfdfdf;
  background: #f8f8f8;
  left: 50%;
  margin-left: -10px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hoverbox:hover span {
  display: block;
}

<table border="1" cellspacing="0px" class="dtable">
  <tr id="th">
    <td>Name</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td class="hoverbox">Some text<span>Hidden text</span></td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
  </tr>
</table>

Answer 3

尝试更改css：

display: none;

与

visibility: hidden;

和

display: block;

与

visibility: visible;

Answer 4

当您使用display:none时，就像删除元素一样，它不存在，当您通过设置display:block进行显示时，就像添加该元素一样在HTML中

您有两种方法可以执行此操作：

1. 将td的位置设置为relative，将tooltip的位置设置为absolute。 Demo

只需将这些添加到您的风格中：

td{
  position:relative;
}

span{
  //Tooltip
  position:absolute;
}

1. 使用css visibility ，就像隐藏元素一样！ Demo

Answer 5

你的css代码必须是这样的

    .dtable {
     margin: 0px auto;
     border:1px solid #ccc;
     border-collapse: collapse;
     text-align: center;
     border-color: black;
     font-weight: bold;
     width: 100%;
}

.dtable tr:nth-child(odd){background-color:#303030}
.dtable tr:nth-child(even){background-color:#333333}

.dtable #th {
     background-color: #000;
     font-family: eurostile;
}

.dtable td {
     padding: 15px 0px;
     font-family: eurostile;
}

.hoverbox span {
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -60px;
    left:-30px;
    visibility: hidden;
    #padding:0 20px;
}

.hoverbox span:after {
    content:'';
    position:absolute;
    bottom:-10px; 
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.hoverbox:hover span {
    visibility: visible;
}