How to remove double header row in html DataTable-CodePudding

I'm trying to build an html DataTable, opened inside a modal, that retrieves the title and the column names from the css file. To do that, I defined a custom class for each column and I wrote the column name in the css file with a CUSTOM_CLASS::after{content: "";} statement.

For instance, here is the definition of a column of the table:

<th ></th>

And here is the css:

.MY_TABLE_COL1::after{content: "Column 1";}

However, when I open the modal, the table appears with a double header row. How can I remove the second one?

$('#myModal').on('shown.bs.modal', function() {
  build_table();
});

function build_table() {
  $('#myTable').DataTable({
    scrollY: '400px',
    scrollCollapse: true,
    columns: [{
      data: "Col1"
    }, {
      data: "Col2"
    }, {
      data: "Col3"
    }],
    destroy: true
  });
}

.MY_MODAL_TITLE::after {
  content: "Title";
}

.MY_TABLE_COL1::after {
  content: "Column 1";
}

.MY_TABLE_COL2::after {
  content: "Column 2";
}

.MY_TABLE_COL3::after {
  content: "Column 3";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css">

<button type="button" id="users"  data-toggle="modal" href="#myModal">Open modal</button>

<div  id="myModal" data-backdrop="false">
  <div >
    <div >
      <div >
        <h5 ></h5>
        <button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div >
        <table  style="width:100%" id="myTable">
          <thead>
            <tr>
              <th ></th>
              <th ></th>
              <th ></th>
            </tr>
          </thead>
          <tbody id="myTableBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

(JsFiddle)

CodePudding user response：

If you add a <span> for the column headers (with appropriate change to css)

.MY_TABLE_COL1 >span::after {
  content: "Column 1";
}

then you don't get the double headers.

$('#myModal').on('shown.bs.modal', function() {
  build_table();
});

function build_table() {
  $('#myTable').DataTable({
    scrollY: '400px',
    scrollCollapse: true,
    columns: [{
      data: "Col1"
    }, {
      data: "Col2"
    }, {
      data: "Col3"
    }],
    destroy: true
  });
}

.MY_MODAL_TITLE::after {
  content: "Title";
}

.MY_TABLE_COL1 >span::after {
  content: "Column 1";
}

.MY_TABLE_COL2 >span::after {
  content: "Column 2";
}

.MY_TABLE_COL3 >span::after {
  content: "Column 3";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css">

<button type="button" id="users"  data-toggle="modal" href="#myModal">Open modal</button>

<div  id="myModal" data-backdrop="false">
  <div >
    <div >
      <div >
        <h5 ></h5>
        <button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div >
        <table  style="width:100%" id="myTable">
          <thead>
            <tr>
              <th ><span></span></th>
              <th ><span></span></th>
              <th ><span></span></th>
            </tr>
          </thead>
          <tbody id="myTableBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

CodePudding user response：

remove the scroll tag

    scrollY: '400px',
    scrollCollapse: true,

heres the working jsfiddle