Table CSS Settings

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css">
<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
     ...

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}