【问题标题】：Bootstrap-tour won't work with a table rowBootstrap-tour 不适用于表格行
【发布时间】：2014-08-24 12:24:25
【问题描述】：

我正在尝试突出显示表格行。即使有了这个针对 z-indexes 等的引导程序修复 github issue link

看看这个小提琴：jsFiddle

JAVASCRIPT

$("#dialog").dialog(); 
var t = new Tour({
 backdrop: true,
 onShown: function(tour) {
    var stepElement = getTourElement(tour);
    $(stepElement).after($('.tour-step-background'));
    $(stepElement).after($('.tour-backdrop'));
},
steps: [
    {
        element: "table tbody tr:first-of-type",
        title: "Title",
        placement: 'bottom',
        content: "Content"
    }        
]
}).restart();


function getTourElement(tour){
   return tour._options.steps[tour._current].element
}

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Power</th>
            <th>Health</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Superman</td>
            <td>Flying</td>
            <td>100%</td>
        </tr>
        <tr>
            <td>Superman</td>
            <td>Flying</td>
            <td>100%</td>
        </tr>
        <tr>
            <td>Superman</td>
            <td>Flying</td>
            <td>100%</td>
        </tr>
    </tbody>
</table>

CSS

table{
    width:100%;
}
.tour-step-background, 
.tour-backdrop {
    position: fixed;
}

.tour-step-background {
    background: #fff;
}

如您所见，仅当您将其 css 更改为：display:block; 时，它才会显示（表格行“tr”）但那样它就会失去它的风格。

【问题讨论】：

您可以通过添加'背景：继承；位置：相对； z-index: 1101;'在 jsfiddle.net/DYNbj/24 中看到的 '.tour-step-backdrop>td' 上。 bootstrap-tour 演示页面显示了在桌子上工作的背景，但由于某种原因，它不能仅使用 tr。
这是解决问题的方法。你为什么不把它作为答案！谢谢！
好的，我继续添加它，但也许其他人可能会解释为什么在这种情况下 td 没有从 tr 和 table 继承这些规则。

标签： javascript css twitter-bootstrap z-index bootstrap-tour

【解决方案1】：

您可以通过添加规则来解决此问题

.tour-step-backdrop>td
{
  position: relative;
  z-index: 1101;
}

如http://jsfiddle.net/DYNbj/24/中所见

【讨论】：