スタイルが生成されたテーブル行

Question

私はこの表の外観を達成しようとしています。私はこのようにスペースをとる方法を理解できませんでした。これはこれまでの私のコードです。どのように私はこれを達成することができますか？

 <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><a href="#" data-bind="click: $parent.deleteTodo" class="glyphicon glyphicon-trash"></a></small></td> 
       </tr>  
     </table> 

Answer 1

次の下位互換性のために探している場合は、これは

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>

Answer 2

さてあなたは、次のスニペットを確認することができます達成するためにflex-boxを使用することができます可能性有用である

.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>