CSS TABLE FIT

by lekhrajpanjwani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h3>Regular Table</h3>

<table class="table table-bordered">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>  
</table>

<h3>Compact Table</h3>

<table class="table table-bordered table-fit">
<thead>
  <th> TEST THE CODE</th>
  <th>DATE some</th>
  <th> status </th>
</thead>
<tbody>
  <tr> 
  <td>
    lekhraj panjwani
  </td>
  <td>lekhraj lekhraj lekhraj panjwani</td>
  <td>APPROVED</td>
  </tr>
  <tr>
    <td>
      lol
    </td>
    <td>ROLF</td>
    <td>
      TEST
    </td>
  </tr>
  <tr>
    <td>
      lol lekhraj lekhraj panjwani
      lekhraj lekhraj panjwani
    </td>
    <td>ROLF</td>
    <td>
      TEST
    </td>
  </tr>
</tbody>
  <!-- <tr>
    <td>Key lekhraj</td>
    <td>AkhilKumarKumar</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>AkhilKumarKumar</td>
  </tr>  --> 
</table>

CSS

/* .table-fit {
  width: 1px;
} */

@mixin width {
    width: auto !important;
}

table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th, tfoot th  {
            @include width;
        }
        tbody td, tfoot td {
            @include width;
        }
    }
}