ブートストラップ：100％の高さのdivをrowspanで1番目に入れます

rowspan="2"のテーブルがあります。thです。ユーザーがマウスをこのthのどこに置いてもBootstrapのツールチップを表示したいのですが、パディングを削除しても常に自動パディングがあります。これにより、th内にツールチップをアクティブ化しないゾーンが作成されます。ブートストラップ：100％の高さのdivをrowspanで1番目に入れます

また、jQuery tablesorterも使用しています。あなたの<div>が<th>にあなたのツールチップを移動するので、全体<th>を満たしていないためだ

th > div { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.tooltip-th { 
 
    margin: -5px; 
 
    padding: 5px 0; 
 
} 
 
.table > thead > tr > th { 
 
    vertical-align: middle; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 
    <table class="table well table-condensed table-bordered table-hover table-striped sorter"> 
 
    <thead> 
 
     <tr> 
 
     <th rowspan="2"> 
 
      <div data-toggle="tooltip" data-placement="bottom" title="Tooltip test"> 
 
      Column title 
 
      </div> 
 
     </th> 
 
     <th> 
 
      Column title 2 
 
     </th> 
 
     </tr> 
 
     <tr> 
 
     <th> 
 
      Column title 3 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</body> 
 

 
</html>

出典

2016-12-22 Heru-Luin

あなたがフィドルを作成する気でしょうか？ –

こんにちは、これでうまくいきません。今は大丈夫かどうか教えてください。 –

完璧！それは問題を理解するのに非常に役立つだろう！.... –

。（下の大文字コードの私のコードの変更を見てください）。私の変更を強調するために叫ぶのではなく:)平和！

PS：境界がどこにあるかを示すライムの背景色が追加されました。常に背景色を追加して、自分が行っていることを見ることができます。

もう1つのヒントは、CSSファイルにこれを入れて境界を表示することです。

* {border: 1px solid red}

（あなたはボックスリセットした場合にのみ動作します。 https://www.paulirish.com/2012/box-sizing-border-box-ftw/）を

th > div { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.tooltip-th { 
 
    margin: -5px; 
 
    padding: 5px 0; 
 
} 
 
.table > thead > tr > th { 
 
    vertical-align: middle; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 
    <table class="table well table-condensed table-bordered table-hover table-striped sorter"> 
 
    <thead> 
 
     <tr> 
 
     <th rowspan="2" TITLE="PLACE YOUR TOOLTIP HERE."> 
 
      <div STYLE="BACKGROUND-COLOR: LIME;" data-toggle="tooltip" data-placement="bottom" title="not here..."> 
 
      Column title 
 
      </div> 
 
     </th> 
 
     <th> 
 
      Column title 2 
 
     </th> 
 
     </tr> 
 
     <tr> 
 
     <th> 
 
      Column title 3 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</body> 
 

 
</html>

出典

2016-12-22 09:44:18 moonunit7

これはブートストラップでは機能しません。ツールチップがdivをテーブルに追加して、私は最初に入れ子になったdivを使用していたからです。 –

ブートストラップ：100％の高さのdivをrowspanで1番目に入れます

答えて

関連する問題