风格生成表行

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

您可以查看以下代码段，如果您正在寻找向后兼容性，则以下内容可能很有用

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flex-box来实现此目标

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;