javascript - 附加 div 与表 thead th 元素内联

Question

我试图在列名旁边加上问号。在网上搜索后，我发现我应该使用 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>

Answer 1

您不能将 div 直接放在表格中，但可以将 div 放在 td 或 th 元素中。您可以为您的 div 使用 display: table-row-group。如果我们遵循 w3 org 表引用，并遵循 Permitted Contents 部分，我们可以看到表标签将 tbody(可选)和 tr 作为唯一允许的内容。

您可以在 div 标签中添加另一个标签(b、span、em 等)以正常工作。例如:

$(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>")
});