如何删除表格的白色背景？基金会导轨

Question

我的问题是，我添加了基础铁轨到我的项目，这是在轨道上的红宝石创建的，我想创建一个小桌子，但是当我创建此表时创建一个白色背景，我想要做的是使我的桌子透明，没有任何颜色的背景。

我试图把一个类和分配属性，但它不起作用，直接添加样式，删除cookie以防万一，但仍然不会改变颜色，只调整大小。

文件的.css

.tabla { 
    width:80%; 
    height: 80%; 
    background-color:transparent; 
} 

文件.html.erb

<table border="2" class="tabla"> 
    <tr> 
    <td>Film Affinity</td> 
    <td><%= image_tag "film_affinity.png",:class=>"imagenPie"%></td> 
    </tr> 
    <tr> 
    <td>IMDB</td> 
    <td><%= image_tag "imdb.png",:class=>"imagenPie"%></td> 
    </tr> 
    <tr> 
    <td>Sensa Cine</td> 
    <td><%= image_tag "sensacine.png",:class=>"imagenPie"%></td> 
    </tr> 

</table> 

Answer 1

默认情况下，Foundation使用选择器设置背景颜色：table thead, table tbody, table tfoot和table tbody tr:nth-child(even)（对于每隔一行）。

https://github.com/zurb/foundation-rails/blob/master/vendor/assets/scss/components/_table.scss

---

下面的CSS应该设置的所有行有一个透明的背景色：

table tbody tr:nth-child(even), table tbody { 
    background-color:transparent; 
} 

Answer 2

似乎挺合我意。也许有一些其他规则正在覆盖您的 css。你可以尝试添加!important，看看能否解决：

.tabla { 
    width:80%; 
    height: 80%; 
    background-color: transparent !important; 
} 

否则，颜色可能会与td或tr而不是从table。在这种情况下，添加以下规则：

.tabla tr, .tabla td { 
    background-color: transparent; 
} 

注意，使用!important通常是bad practice。尝试搜索和清理你的CSS代码，而不是使用该子句。

此外，表格的border属性为deprecated now。您应该改用bordercss property。