html - CSS布局div位于下方，并在圆 table 行中

需要有关CSS的帮助。
我的问题是：


卡的布局相互重叠
tr / td没有舍入的选项


我想实现与此类似的外观：



我正在使用materializecss来做到这一点。我正在尝试的全部页面布局：


到目前为止，这就是我所拥有的。

<div class="col m6">
    <div class="card">
      <div class="card-content"><span class="badge"><i class="material-icons dp48">search</i></span>
        <span class="card-title">My List
       <span class="new badge red" data-badge-caption="">4</span>
        </span>
        <div class="table-responsive">
          <table class="table striped table-hover table-curved" ng-controller="Hello">
            <tbody>
              <tr>
                <td><b>12345</b></td>
                <td>Random Text @</td>
                <td><b>300121</b></td>
              </tr>
              <tr>
                <td><b>12345678</b></td>
                <td>Random Text @</td>
                <td><b>300121</b></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col m6">
    <div class="card">
      <div class="card-content">
        <span class="card-title">My List
       <span class="new badge red" data-badge-caption="">4</span>
        </span>
        <div class="table-responsive">
          <table class="table striped table-hover table-curved" ng-controller="Hello">
            <tbody>
              <tr>
                <td><b>12345</b></td>
                <td>Random Text @</td>
                <td><b>300121</b></td>
              </tr>
               <tr>
                <td><b>123</b></td>
                <td>Random Text @</td>
                <td><b>300121</b></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

这是jsfiddle：https://jsfiddle.net/Shank09/tx3qpzsa/6

更新

当前是这样的：




但是我想做这样的事情：

最佳答案

materializecss中的以下行：

table.striped > tbody > tr > td {
  border-radius: 0;
}

是非常具体的，因此，如果您设置table.striped td（或类似名称），上述各行将覆盖您的规则并删除您的border-radius。您需要更加具体（或使用!important语句-不推荐）。

例如，您可以使用具有相同特定性的选择器，但在materializecss导入后添加CSS：

table.striped > tbody > tr > td:first-child {
  border-radius: 10px 0 0 10px;
}

table.striped > tbody > tr > td:last-child {
  border-radius: 0 10px 10px 0;
}

由于使用了伪选择器，因此上面的选择器更加具体。

这应该运作良好。请注意，您需要在border-radius上设置td，因为它不适用于tr元素。 :first-child和:last-child伪选择器用于什么目的。我在第一个td上设置右上和下边界半径，在最后一个上设置左上和下边界。

圆角演示：https://jsfiddle.net/norin89/tx3qpzsa/7/

附言JSFiddle上有一个“外部资源”选项，因此您无需将整个文件粘贴到CSS窗格中，因为您可以导入整个框架CSS :)



更新：

如果您希望表格像图片一样组成，请查看Materilize CSS Grid-http://materializecss.com/grid.html，其ID与Bootstrap Grid非常相似。列（.col）应该是类.row的元素的直接子元素，而不是代码中的.container。我在文档中没有看到有关嵌套.row的任何信息，但它似乎运行良好。

网格演示：https://jsfiddle.net/norin89/tx3qpzsa/10/

请注意，我使用了<div class="col s12 m6">，因此每一列在狭窄的屏幕上都是全宽的（一个接一个），在中等屏幕上会变为宽度的50％（.m6）（由于documentation比600px宽） 。

关于html - CSS布局div位于下方，并在圆 table 行中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45148807/