引导大表与弹出窗口

Bootstrap Large table with Pop ups

本文关键字：窗口      更新时间：2023-09-26

我已经创建了一个有21列的表，因为每个列的名称太大了，我减少了它们，现在我想在悬停上添加弹出式，在每个上显示全文。下面是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>

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

相关文章：