Bootstrap表格表头Tooltip异常：表头宽度无故增大问题求助

我之前也碰到过这个坑——Bootstrap 3的tooltip直接绑在表格表头<th>上时，确实会莫名其妙让表头宽度变大，尤其是带colspan的表头更容易出问题。本质是tooltip初始化时会对目标元素的布局计算产生隐性干扰，导致浏览器重新计算表头宽度时出现偏差。

最稳妥的解决方案：把Tooltip绑定到表头内的嵌套元素上 #

别直接在<th>上设置tooltip属性，而是在<th>里套一个<span>（或者<div>），把tooltip的属性和绑定逻辑转移到这个嵌套元素上。这样表格只会根据<span>的内容计算表头宽度，tooltip的初始化逻辑就不会干扰布局了。

修改后的完整代码示例：

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  /* 可选优化：让整个表头区域hover都能触发tooltip */
  th > span {
    display: block;
    width: 100%;
  }
</style>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<div class="row">
<div class="col-lg-3">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr><th colspan="2"> status (Overall)</th></tr>
<tr>
<th colspan="2">
  <span data-toggle="tooltip" data-placement="right" title="Hooray!"> Pending </span>
</th>
</tr>
<tr>
<th>
  <span data-toggle="tooltip" data-placement="right" title="Hooray!">M</span>
</th>
<th>
  <span data-toggle="tooltip" data-placement="right" title="Hooray!">O</span>
</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>
<script>
$(document).ready(function(){ 
  $('[data-toggle="tooltip"]').tooltip(); 
});
</script>
</body>
</html>

为什么这个方法管用？ #

表格表头的宽度是基于内部内容的尺寸计算的，直接绑在<th>上时，Bootstrap的tooltip初始化会悄悄修改元素的DOM属性或触发额外的布局计算，导致浏览器误判表头宽度。而把tooltip绑到内部<span>上后，<th>的宽度完全由<span>的文字内容决定，tooltip的逻辑不会再干扰表头的布局计算。

另外，上面加的CSS样式是为了让用户hover整个表头区域都能弹出tooltip，提升体验；如果只需要hover文字时触发，直接去掉这个样式就行。

内容的提问来源于stack exchange，提问作者Abdullah Al Mamun