CSS佈局div下面和圓桌行

的卡片佈局來下相互
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

UPDATE

這是怎麼回事，目前：

但我想這樣做：

來源

2017-07-17 Shank

你的js小提琴看起來合適嗎？你能更好地描述你面臨的問題嗎？ –

@BrandtSolovij在我的佈局圖片中，「我的列表」應該在左側。和其餘的右手邊。我不知道該怎麼做 – Shank

已更新jsfiddle – Shank

以下行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; 
}

以上選擇是更具體的，由於僞選擇使用。

這應該很好。請注意，您需要在td上設置border-radius，因爲它不適用於tr元素。那是什麼:first-child和:last-child僞選擇器用於。我在第一個td上設置了右上方和下方的邊框半徑，並將最上方和最下方的頂部和底部留下。

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

附：有一個關於的jsfiddle「外部資源」選項，這樣你不需要過去的整個文件CSS面板中，你可以導入整個框架CSS :)

UPDATE：

如果你想你的表在圖片上進行組合，看看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">所以每列將在窄屏幕全寬（一個下另一個）和將變更爲上平臺屏幕寬度（.m6）的50％（由於到documentation寬於600px）。

來源

2017-07-17 17:23:21 norin89

謝謝，現在明白了:) – Shank

CSS佈局div下面和圓桌行

回答

相關問題