Html CSS布局div位于下方和圆桌行

需要css方面的帮助。 我的问题是：

这些卡片的布局相互重叠

tr/td没有办法解决这个问题

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

我过去经常这样做。我尝试使用的所有页面布局：

这就是我目前所拥有的

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

搜索
我的名单
4.
12345
随机文本@
300121
12345678
随机文本@
300121
我的名单
4.
12345
随机文本@
300121
123
随机文本@
300121

以下是JSFIDLE：

更新

目前情况如下：

---

但我想这样做：

中的以下行：

非常具体，因此，如果您设置

table.striped td

（或类似设置），上述行将覆盖您的规则并删除您的

边框半径。您需要更加具体（或使用
！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;
}

由于使用了伪选择器，上述选择器更加具体

这应该很有效。请注意，您需要在
td
上设置
border radius
，因为它不适用于
tr
元素。使用的是
：first child
和
：last child
伪选择器。我在第一个
td
上设置了右上下边界半径，在最后一个上设置了左上下边界半径

圆角演示：

另外，JSFIDLE上有“外部资源”选项，所以您不需要将整个文件传递到CSS窗格，因为您可以导入整个框架CSS:）


更新：

如果你想让你的表格如图所示组成，看看MaterializeCSS网格吧——它的id非常类似。列（
.col
）应该是类为
.row
的元素的直接子元素，而不是代码中的
.container
。我在文档中没有看到任何关于嵌套
.row
s的内容，但它似乎工作得很好

网格演示：

请注意，我使用了
，因此窄屏幕上的每一列都是全宽的（一列接一列），而中等屏幕上的每一列都将变为50%的宽度（
.m6
）（因为宽度大于
600px
）。
您的js小提琴看起来合适吗？你能更好地描述一下你面临的问题吗？@BrandtSolovij在我的布局图中，“我的列表”应该在左边。其余的在右手边。我不知道该怎么做更新的JSFIDLE您的圆角问题可以通过
边框折叠
，
边框间距
，
：第一个孩子
和
：最后一个孩子
来解决，请参阅。对于所有其他问题，都有更新的问题。第一个问题需要建议谢谢，现在就知道了：）
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;
}