javascript - 为什么数据表的标题与内容未对齐？(Why the header of datatable misaligned with the content?)

Question

I have a datatable that th header misaligned with the content.

(我有一个数据表，标题与内容未对齐。)

Please help me to adjust the header and content so that parallel.

(请帮我调整标题和内容，使之平行。)

Because it look

(因为看起来)

<div style="margin-top:10px; padding: 10px;">
  <table id="example" class="table display nowrap table-bordered table-striped" style="width:100%;">
    <thead>
      <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test34567</th>
        <th>Test890</th>
      </tr>
    </thead>
    <tbody>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tbody>
  </table>
</div>

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true
  });
});

  ask by Questioning People translate from so

Answer 1

I think you are missing your <tr></tr> around your <td></td> .

(我认为您在<td></td>周围缺少了<tr></tr> <td></td> 。)

    <tbody>
        <tr>
           <td>A</td>
           <td>B</td>
           <td>C</td>
           <td>D</td>
        </tr>
    </tbody>