DataTables

DataTables Examples

HTML

<!DOCTYPE html>

<html>

  <head>
    <meta name="viewport" content="width=device-width" />
    <title>DataTables Header issue</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <link href="http://mstratman.github.io/jQuery-Smart-Wizard/styles/demo_style.css" rel="stylesheet" type="text/css">
    <link href="http://mstratman.github.io/jQuery-Smart-Wizard/styles/smart_wizard.css" rel="stylesheet" type="text/css">

    <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>


    <h2>DataTables Header issue on initial load</h2>
    <h4>If you try minimizing/maximizing your browser, the Header alignment is fixed</h4>
    <div id="wizard" class="swMain">
      <ul>
        <li>
          <a href="#step-1">
            <label class="stepNumber">1</label>
            <span class="stepDesc">
                        Step 1<br />
                        <small>Step 1 description</small>
                    </span>
          </a>
        </li>
        <li>
          <a href="#step-2">
            <label class="stepNumber">2</label>
            <span class="stepDesc">
                        Step 2<br />
                        <small>Step 2 with DataTables</small>
                    </span>
          </a>
        </li>
        <li>
          <a href="#step-3">
            <label class="stepNumber">3</label>
            <span class="stepDesc">
                        Step 3<br />
                        <small>Step 3 description</small>
                    </span>
          </a>
        </li>
        <li>
          <a href="#step-4">
            <label class="stepNumber">4</label>
            <span class="stepDesc">
                        Step 4<br />
                        <small>Step 4...