CSS：行列邊框不顯示

我剛開始進入Web應用程序開發，並且對css/boostrap有個疑問。CSS：行列邊框不顯示

這是我的模板：

{% extends "layout.html" %} 

{% block title %} 
    display 
{% endblock %} 

{% block main %} 

<div class="container-fluid"> 
    <div class="row" style="font-size:150%"> 
      <div class="col-md-2">Symbol</div> 
      <div class="col-md-2">Name</div> 
      <div class="col-md-2">Shares</div> 
      <div class="col-md-2">Price</div> 
      <div class="col-md-2">Sum</div> 
    </div> 
    {% for elem in p %} 
    <div class="row"> 
      <div class="col-md-2">{{ elem.stock }}</div> 
      <div class="col-md-2">{{ elem.name }}</div> 
      <div class="col-md-2">{{ elem.shares }}</div> 
      <div class="col-md-2">${{ elem.price }}</div> 
      <div class="col-md-2">${{ elem.total}}</div> 
    </div> 
    {% endfor %} 

    <div class="row"> 
     <div class="col-md-2"> TOTAL SPENDED:</div> 
     <div class="col-md-offset-6">${{overall_total}}</div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2">CASH LEFT:</div>   
     <div class="col-md-offset-6">${{cash_left}}</div> 
    </div> 
</div> 
{% endblock %}

我使用的瓶和傳遞不同的值的表。問題是，當創建我的表時，它沒有任何邊框或顏色。任何人都知道我在做什麼錯了？謝謝你們。

下面是它的照片：

來源

2017-01-20 tadm123

你應該看看

標籤，該標籤有桌子。 –

回答

沒有CSS這將真正給邊界，你行，我會建議添加此代碼的DIV容器內，任何行之前

<style> 
    .row { 
    border-bottom: 1px solid #000; 
    } 
</style>

來源

2017-01-20 07:36:00 Kejt

更好的給你一個背景色給主div，給單元格填充1px和背景色爲白色。

.container-fluid{ 
    background-color : black ; 
} 
.container-fluid .col-md-2 { 
    padding: 1px; 
    background-color: white; 
}

來源

2017-01-20 07:42:12 jithya

在我看來，引導風格的表將是更好的選擇。請參閱http://getbootstrap.com/css/#tables

來源

2017-01-20 07:45:23

默認情況下，bootstrap沒有添加邊界的行。有兩種方法

添加邊框直接使用僞類，如果你想在邊境更多的控制權的行

.row { border-bottom: 1px solid black; } 2.

.row { 
    position: relative; 
} 



.row:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    background: black; 
    left: 0; 
}

來源

2017-01-20 07:49:04

相關問題