将Bootstrap 3布局转换为表格

Question

我正在一个项目中，我希望使用Bootstrap 3拥有一个“网格视图”，但是随后我想要一个按钮，用户可以单击以使用{{1将网格视图转换为“列表视图” }}由于某种原因，我无法使表格行（和单元格）扩展到100％的宽度。

display:table;

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.table-container').toggleClass('list-view');
  });
});

.table-container.list-view {
  display:table;
  table-layout:fixed;
  width:100%;
}

.table-header {
  display:none;
}
  .list-view .table-header, .list-view .details {
    display:table-row;
    width:100%; /* row is not extending full width of table */
  }
  .table-header > div {
    display:table-cell;
  }
  
.col-sm-6 {
  margin-top:30px;
}
  .list-view .col-sm-6 {
    width:100%;
  }
  .col-sm-6 span {
    display:block;
  }
    .list-view .col-sm-6 span {
      display:table-cell;
    }
  .row.first .col-sm-6 {
    margin-top:0;
  }