動態表格上的陰影

我正在試圖在每張表格上放一個陰影。但它不適用於第一個，我不明白爲什麼。動態表格上的陰影

我把你的CSS內聯，你可以看到所有的東西

{% for resultat in resultats %} 
    <tr style="background-color: #F0F0F0; box-shadow: 8px 8px 12px #aaa, 8px -8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;" 
    id="first_{{ nb }}> 
     <td> 
      <span class="fl marginTop8"> 
       {{ resultat.missions.getDateReaPrev()|date('Y-m-d') }} 
      </span> 
     </td> 
     <td></td> 
     <td></td> 
     <td> 
      <span class="fl marginTop8"> 
       {{ resultat.distance }} Km 
      </span> 
     </td> 
     <td></td> 
     <td class="badge fr" style="color: darkorange;">{{ resultat.nb_pdv }}</td> 
    </tr> 

    <tr style="background-color:white"> 
     <td colspan="6"></td> 
    </tr> 
{% endfor %}

這是我這段代碼有：

正如你所看到的，陰影在右邊都tr ...但邊界只在最後tr。

我希望得到這樣一個

感謝您的幫助。

編輯：爲了更精確，桌上有一個類tableEnquete。

所以有太多

.tableEnquetes tr:nth-child(2){ position:relative } 

.tableEnquetes table{ 
    border-radius: 0 0 15px 0; 
    box-shadow: 3px 3px 3px #AAA; 
    margin: 0; 
    table-layout: fixed; 
}

下面是這個問題的一個小提琴：https://jsfiddle.net/wdwgn7ta/

來源

2017-08-10 Minirock

你能粘貼你的CSS？如果可以的話，在jsfiddle上粘貼所有必要的代碼 – JGrinon

另外：代碼中我們指的是生成的標記，因爲這純粹是一個整形問題，我們不需要知道用於生成最終標記的循環。 – Terry

我添加了一些關於CSS的信息......沒有更多，我自己添加的內容在tr上內聯。這部分是關於灰色的行，橙色的是第四行。 – Minirock

你只需要改變background-color:white到background-color:none

<tr style="background-color:none"> 
    <td colspan="6"></td> 
</tr>

來源

2017-08-10 09:29:08 JGrinon

謝謝，這正是我所需要的。我不會想象白色的行覆蓋陰影:(再次感謝！ – Minirock

動態表格上的陰影

回答

相關問題