Style Generated Table Rows - html

Question

I'm trying to achieve this look for a table. I couldn't figure out how to space it like this. This is my code so far. How can i accomplish this?
<table class="table table-inverse" data-bind="foreach: todos">
<tr >
<td ><input type="checkbox" data-bind="checked: IsDone, click: $parent.updateTodo" /></td>
<td ><span data-bind="text: Description"></span></td>
<td ><small></small></td>
</tr>
</table>

Answer 1

Well you can check the following snippet, if you are looking for backward compatibility the following could be useful
.wrapper{padding:20px;background:blue;}
table tr td:last-child,table tr td:first-child{width:25px;}
table{width:100%;background:#fff;margin-bottom:5px}
table:last-child{margin-bottom:0;}
<div class="wrapper">
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
</div>

Answer 2

You can use flex-box to achieve this
body{
background:#3a9bcb;
}
table{
width:100%;
}
.flex-box {
display: flex;
margin-bottom: 5px;
padding: 10px;
background:#fff;
}
.col {
flex: 1 1;
}
.col:first-child,
.col:last-child {
flex: 0 0 30px;
}
<table>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
</table>