添加样式 CSS Table

Question

我正在将数据库中的数据回显到 <table>，但是我试图在每个输出下添加一条渐变线，以在每个 <tr> 输出行之间显示。但是我无法在 <tr> 上获得 CSS。

我已经设法在 <hr> 上将我想要的设计放在一起：http://jsfiddle.net/ghrw3k8e/。

但我希望它在我的 table 行（而不是列）之间。

我的PHP输出数据：

echo " <tr> 
<td align='center'>".." </td> 
<td align='center'>".."</td> 
<td align='center'>".."</td>
 </tr> ";

Answer 1

您可以为每行插入一个额外的行。

hr.soften {
  height: 1px;
  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));
  border: 0;
}
td {
  width: 200px;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>
      <hr class="soften" />
    </td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>
      <hr class="soften" />
    </td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

Answer 2

只需使用pseudo-elements。您必须将 "border" 放在每个 <tr> 中的一个 <td> 上，因此如果它们都相同 width，其宽度应等于 100 × number_of_columns %：

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>

添加样式 CSS Table

Adding style to CSS Table

css

php

html-table