Question

我创建了包含21列的表格，因为每列的名称太大，我将它们删减了，现在我想添加pop-over：hover，在每个列上将显示全文。这是HTML：

<div class="col-lg-12">
        <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Player</th>
                <th>POS</th>
                <th>FW</th>
                <th>M</th>
                <th>FM</th>
                <th>YC</th>
                <th>RC</th>
                <th>G</th>
                <th>Ass</th>
                <th>SoT</th>
                <th>CS</th>
                <th>SGM</th>
                <th>TW</th>
                <th>PI</th>
                <th>PC</th>
                <th>PKM</th>
                <th>S</th>
                <th>GC</th>
                <th>MP</th>
                <th>AMP</th>
                <th>Buy</th>
            </tr>
        </thead>
         <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>123</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td>13</td>
                <td>322</td>
                <td>312</td>
                <td>13</td>
                <td>32132</td>
                <td>312</td>
                <td>13</td>
                <td>312</td>
                <td><div class="checkbox">
                <label>
                <input type="checkbox">
                </label>
                </div></td>
            </tr>
          </tbody>
    </table>
    </div>

Answer 1

您可以在<th title="colName">中使用title属性，当用户悬停在<th>标题文字中时，您可以在标题中写出列的全名。

带弹出窗口的Bootstrap大表

1 个答案: