html - CSS 布局 div 位于下方和圆 table 行

Question

需要 CSS 方面的帮助。 我的问题是:

1. 卡片的布局相互重叠
2. 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

更新

目前是这样的:

---

但是我想做这样的事情:

Answer 1

materializecss 中的以下行:

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

非常具体，所以如果您设置 table.striped td (或类似的)以上几行将覆盖您的规则并删除您的 border-radius .您需要更具体(或使用 !important 声明 - 不推荐d)。

例如，您可以使用具有相同特异性的选择器，但在 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 上设置了右上和下边界半径并在最后留下顶部和底部。

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

附言JSFiddle 上有“外部资源”选项，因此您无需将整个文件传递到 CSS Pane ，因为您可以导入整个框架 CSS :)

---

更新:

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

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

请注意，我使用了 <div class="col s12 m6">所以每一列在窄屏幕上都是全宽的(一个在另一个下面)，在中等屏幕上会变成宽度的 50%(.m6)(由于 documentation 比 600px 宽)。