Question

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

更新

目前的情况如下：

但我想做这样的事情：

Answer 1

materializecss下面的行：

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

非常具体，因此如果您设置table.striped td（或类似），则上述行会覆盖您的规则并移除您的border-radius。您需要更具体（或使用!important声明 - 不推荐 d）。

例如，您可以使用具有相同特异性的选择器，但在materializecss import之后添加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/

P.S。 JSFiddle上有“外部资源”选项，因此您无需将整个文件传递到CSS窗格，因为您可以导入整个框架CSS：）

<强>更新

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

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

请注意，我使用了<div class="col s12 m6">，因此每个列在窄屏幕上都是全宽的（一个在另一个下面），并且会在中等屏幕上更改为宽度的50％（.m6）（由于{{ 3}}比600px更宽。

CSS布局div位于下方，圆桌行

1 个答案: