如何使用Jquery在一个列标题下包含2列

Question

这是我的表格html，我正在尝试使用Jquery在一个列标题下包含2列，我尝试了以下代码：

$('#test th.column_Column1').append( $('<th/>', {text : 'HEADER BOth'}) );

但是它没有给出期望的输出：

<table class="xrounded_shadowed default footable-loaded footable" id="test">
<thead>
<tr>
<th class="select_checkbox footable-visible footable-first-column" style="width: 40px;"><label><input type="checkbox" onclick="toggleAll(this)" style="float:left;"><i></i></label></th>
<th class="column_Column1 footable-visible">Column1</th>
<th class="column_Column2 footable-visible footable-last-column">Hari</th></tr></thead>
<tbody>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="even">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr>
<tr class="odd">
<td class="select_checkbox footable-visible footable-first-column"><label><input type="checkbox" name="d-49700-checkbox_username" value=""><i></i></label></td>
<td class="column_Column1 footable-visible" style=""><span class="footable-toggle"></span>01/01/2019</td>
<td class="column_Column2 footable-visible footable-last-column" style="">Tuesday</td></tr></tbody></table>

Answer 1

改为添加两行，并且第一行应该有一个跨所有列的单列

<table>
    <thead>
          <tr>
              <th colSpan="2">Column Header</th>
          </tr>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
          </tr>
    </thead>
</table>

这是一个使用jQuery动态地执行更多操作的代码段...

$(function(){
  var $thead = $("<thead></thead>");
  $thead.append("<tr><th colspan='2'>Column Header</th></tr>");
  $thead.append("<tr><th>Column1</th><th>Column2</th></tr>");
  
  $("table").append($thead);
});

table{
 width: 100%;
 border-collapse: collapse;
 border: 1px solid #333;
 }
 
 thead{
 background-color: #FFEB3B;
 }
 th, td{
 border: 1px solid #333;
 padding:4px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
</table>

Answer 2

colSpan和rowSpan属性用于执行此类操作。在这种情况下，需要使用colSpan来代替<th>。然后设置其text-align:center，您将完成

th:nth-child(1) {
    text-align: center;
}
th,td{
    border:2px solid
}
table{
border-collapse:collapse;
}

<table>
    <thead>
          <tr>
              <th colSpan="2">Column Header</th>
          </tr>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
          </tr>
          <tbody>
            <tr>
              <td>Column 1 Item</td>
              <td>Column 2 Item</td>
            </tr>
            <tr>
              <td>Column 1 Item</td>
              <td>Column 2 Item</td>
            </tr>
          </tbody>
    </thead>
</table>