StackOverflow Modal Question

Setting width of modal to content width

HTML

<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>
<button class="btn btn-primary" data-toggle="modal" data-target="#tableWorklog">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="tableWorklog" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!--Modal Header -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Member name's Worklog</h4>
      </div>
      <!-- /header -->
      <div class="modal-body">
        <!--Modal Body -->
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Task Name</th>
              <th>Location</th>
              <th>Collab</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>task 1</td>>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>Total Hours</th>

            </tr>
          </tfoot>
        </table>
      </div>
      <!-- /body -->
      <div class="modal-footer">
        <!-- Modal Footer -->
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
      <!-- /footer -->
    </div>
  </div>
</div>
<!-- /modal -->

CSS

.modal-dialog {
  width: auto;
  max-width: 960px; // Optional if you would like to restrict the width to a maximum
}