Q:

Html table Collapse in TD Level when i change alignment changes it should be fixed?

In the following code when i click Order column (or) second column Order header changes its alignment it is not fixed it comes down.
Here I have the sample code that not properly done.
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
    <h2>Simple Collapsible</h2>
    <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <table class="table table-hover">
    <thead>
      <th></th>
      <th></th>
      <th></th>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target="#accordion">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
      </tr>
      <tr>
        <td colspan="3">
          <div id="accordion" class="collapse">Hidden by default</div>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table fixed">
    <thead>
      <tr>
        <th></th>
        <th>Order Number</th>
        <th>Order Date</th>
        <th>Total Price</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target=".order1">
        <td>&gt;</td>
        <td>1001</td>
        <td data-toggle="collapse" data-target=".order1">9/29/2016</td>
        <td>$126.27</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="collapse order1">
        <td></td>
        <td></td>
        <td>Shirt</td>
        <td></td>
        <td></td>
        <td></td>
        <td>CHECK</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

A:

The headers' alignement where changing because when then second row appears the 'C' column width increase so obviously the others decrease so that the table total width does not change.
So the simplest solution I think is to fix the column size like that :

td{ width : 80px;}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
    <h2>Simple Collapsible</h2>
    <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <table class="table table-hover">
    <thead>
      <th></th>
      <th></th>
      <th></th>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target="#accordion">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
      </tr>
      <tr>
        <td colspan="3">
          <div id="accordion" class="collapse">Hidden by default</div>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table fixed">
    <thead>
      <tr>
        <th></th>
        <th>Order Number</th>
        <th>Order Date</th>
        <th>Total Price</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target=".order1">
        <td>&gt;</td>
        <td>1001</td>
        <td data-toggle="collapse" data-target=".order1">9/29/2016</td>
        <td>$126.27</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="collapse order1">
        <td></td>
        <td></td>
        <td>Shirt</td>
        <td></td>
        <td></td>
        <td></td>
        <td>CHECK</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

