Make table content center but align left - html

Question

I want to use table to do a legend for a chart. I created an example to show the problem.
https://jsfiddle.net/s3mf64gq
<div class="container">
<div class="row">
<div class="panel col-md-12">
<table class="table borderless">
<tbody>
<tr>
<td>
Jane - Software Engineer
</td>
<td>
John - Senior Marketing Executive
</td>
</tr>
<tr>
<td>
Teddy - CEO
</td>
<td>
James - Lecturer
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have 2 requirements:
all of the item must be align to the left
the container must be center to the parent
How to solve it? I'm stuck.
The challenge is the length of the items is not equal, otherwise I would simply do text-align center on the td then it's solved.

Answer 1

Since the .table class has a predefined width of 100%, you need to set it to auto so the <table> will be sized by its content.
Then by adding margin: 0 auto it will center horizontally.
.table {
margin: 0 auto; /* horizontally center */
width: auto; /* reset the built in value of 100% */
}
Updated fiddle
Stack snippet
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding: 0;
}
.panel {
background: #eee;
}
.borderless td,
.borderless th {
border: none !important;
}
.table {
margin: 0 auto;
width: auto;
}
</style>
<div class="container">
<div class="row">
<div class="panel col-md-12">
<table class="table borderless">
<tbody>
<tr>
<td>
Jane - Software Engineer
</td>
<td>
John - Senior Marketing Executive
</td>
</tr>
<tr>
<td>
Teddy - CEO
</td>
<td>
James - Lecturer
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>