我正在将数据库中的数据回显到 <table>
中,但是我试图在每个输出下添加一条渐变线,以显示在每个 <tr>
之间输出行。但我无法在 <tr>
上获得正确的 CSS .
我已经成功地将我想要的设计放在了 <hr>
上这里:http://jsfiddle.net/ghrw3k8e/ .
但我希望它在我的表格行(而不是列)之间。
我的 PHP 输出数据:
echo " <tr>
<td align='center'>".$1." </td>
<td align='center'>".$2."</td>
<td align='center'>".$3."</td>
</tr> ";
最佳答案
只需使用 pseudo-elements
.你必须把那个“边框”放在一个 <td>
上每个 <tr>
, 所以它的宽度应该等于 100 × number_of_columns %
如果它们都一样width
:
table {
width: 100%;
border-collapse: collapse;
}
td {
position:relative;
width: 33.333333%;
border: 1px solid transparent;
text-align:center;
}
tr:not(:last-child) > td:first-child::after {
content:"";
position:absolute;
bottom:-1px;
left:0;
height: 1px;
width:300%;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
}
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
尽管将它放在 <tr>
上似乎更合乎逻辑。 ,它不会正确定位,正如您可以从规范中看到的那样:http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
这是不正确的代码。你可以看到 ::after
元素位于页面的最底部:
table {
width: 100%;
border-collapse: collapse;
}
tr{
position:relative;
}
td {
width: 33.333333%;
border: 1px solid transparent;
text-align: center;
}
tr:not(:last-child)::after {
content:"";
position:absolute;
bottom:-1px;
left:0;
height: 1px;
width:300%;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
}
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
关于php - 向 CSS 表格添加样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30422423/