我正在尝试在列名称旁边添加问号。在网上搜索后，我发现我应该display: flex对单个列使用它，但是当我尝试对其他列进行相同操作时，它开始出现，如jsfiddle输出所示。怎么了？然后如何在列旁边放置图标？
$(function() {
$('table thead tr .col_heading.level0.col2').append("<div data-toggle='tooltip' title='We need your phone number because...'>?</div>")
$('table thead tr .col_heading.level0.col3').append("<div data-toggle='tooltip' title='We need your phone number because...'>?</div>")
});.col_heading.level0.col2 {
position: relative;
display: flex;
/* width:40%; */
}
.col_heading.level0.col3 {
position: relative;
display: flex;
/* width:40%; */
}
.col_heading.level0.col2 .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
/* display: inline-block; */
z-index: 1;
}
.col_heading.level0.col2:hover .tooltiptext {
visibility: visible;
}
#T_3bac276a_15f8_11ea_b73d_475809f3cfcd
{
position:absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="T_3bac276a_15f8_11ea_b73d_475809f3cfcd" >
<thead>
<tr>
<th class="blank level0" ></th>
<th class="col_heading level0 col0" > a</th>
<th class="col_heading level0 col1" >b</th>
<th class="col_heading level0 col2" >c</th>
<th class="col_heading level0 col3" >d</th>
</tr>
</thead>
<tbody>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row0" class="row_heading level0 row0" > 0
</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col0" class="data row0 col0" >1</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col1" class="data row0 col1" >x</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col2" class="data row0 col2" >0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col3" class="data row0 col3" >0.0106405</td>
</tr>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row1" class="row_heading level0 row1" >1</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col0" class="data row1 col0" >2</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col1" class="data row1 col1" >y</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col2" class="data row1 col2" >0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col3" class="data row1 col3" >0.00423519</td>
</tr>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row2" class="row_heading level0 row2" >2</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col0" class="data row2 col0" >3</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col1" class="data row2 col1" >z</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col2" class="data row2 col2" >0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col3" class="data row2 col3" >0.0071003</td>
</tr>
</tbody>
</table>您不能将div直接放在表中，但可以将div放在td或th元素中。您可以为div使用display：table-row-group。如果遵循w3 org表参考，并遵循Permitted Contents部分，我们可以看到table标记将tbody（可选）和tr作为唯一允许的内容。
您可以将另一个标签（b，span，em等）添加到div标签中以使其正常工作。例如：
$(function() {
$('table thead tr .col_heading.level0.col2').append("<div data-toggle='tooltip' title='We need your phone number because...'><p>?</p></div>")
$('table thead tr .col_heading.level0.col3').append("<div data-toggle='tooltip' title='We need your phone number because...'><p>?</p></div>")
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句