twitter-bootstrap - Bootstrap 4 table row shadow

Question

Is there a way to show a shadow around table rows with bootstrap 4?

I tried the following, but the shadow only appears around the outside of the table:

<table>
<TR class="shadow p-3 mb-3 bg-white rounded">
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
</TR>
<TR class="shadow p-3 mb-3 bg-white rounded">
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
</TR>
<TR class="shadow p-3 mb-3 bg-white rounded">
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
  <TD>Table Cell</TD>
</TR>
</table>

See JSFiddle https://jsfiddle.net/na6ohL0j/

标签： twitter-bootstrapbootstrap-4shadow

Answer 1

从您的 html 中删除shadow该类并在您的 css 中添加以下内容：

tr { 
box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5);
display: block;
}