我将数据库中的数据回显到<table>，但是我试图在每个输出下添加一条渐变线，以显示每个<tr>输出行之间。但我无法在<tr>上获得CSS。
我已经设法将<hr>放在echo " <tr>
<td align='center'>".$1." </td>
<td align='center'>".$2."</td>
<td align='center'>".$3."</td>
</tr> ";
这里的设计：http://jsfiddle.net/ghrw3k8e/。
但我希望它介于我的表行（而不是列）之间。
我的PHP输出数据：
var app=angular.module("MyCat",[]);
app.controller("CatController",function($scope,$http){
$scope.entities=[];
$scope.entity={};
$scope.currentEntity=null;
$scope.selectedEntities=[];
$scope.dataTypes=[];
$scope.field={};
$scope.fields=[];
$scope.records=[];
$scope.rows=[];
$scope.action=null;
$scope.relations=[];
$scope.loadTables=function(){
$http.get("/getTables")
.success(function(data){
$scope.entities=data;
});
$http.get("/getTypes")
.success(function(data){
$scope.dataTypes=data;
console.log($scope.dataTypes);
});
};
$scope.loadTables();
$scope.saveTable=function(){
$http.post("/saveTable",$scope.entity)
.success(function(data){
$scope.entities.push(data);
console.log($scope.entities);
});
};
$scope.getRows=function(){
if($scope.currentEntity!=null){
$http.get("/getAllRecords?entityID="+$scope.currentEntity.id)
.success(function(data){
$scope.rows=data;
console.log($scope.rows);
});
}
};
$scope.saveField=function(){
$scope.field.entity=$scope.currentEntity;
$http.post("/saveField",$scope.field)
.success(function(data){
$scope.fields.push(data);
console.log($scope.entities);
});
};
$scope.deleteField=function(index) {
$scope.fields.splice(index,1);
};
$scope.updateField = function (index) {
};
$scope.saveEdits = function() {
$scope.editmode = false;
$scope.field= angular.copy($scope.currentrow);
};
$scope.showFields=function(t){
$scope.currentEntity=t;
$http.get("/getFields?id="+t.id)
.success(function(data){
$scope.fields=data;
});
//$scope.getRows();
$scope.action="structure";
console.log($scope.currentEntity);
};
$scope.viewTables=function(){
$scope.currentEntity=null;
};
$scope.saveRecord=function(){
console.log($scope.records);
var o={};
o.entityID=$scope.currentEntity.id;
o.record=[];var i=0;
for(id in $scope.records){
o.record[i]={};
o.record[i].fieldID=id;
o.record[i].value=$scope.records[id].value;
++i;
}
console.log(o);
$http.post("/saveRecord",o)
.success(function(data){
console.log(data);
});
};
$scope.view=function(action){
$scope.action=action;
if(action=='rows'){
$scope.getRows();
}
else if(action=='structure'){
$scope.showFields($scope.currentEntity);
}
else if(action=='form'){
console.log("-----------");
console.log($scope.fields);
//$scope.showFields();
for(item in $scope.fields){
var f= $scope.fields[item];
if(f.relation!=null){
$http.get("/getAllRecords?entityID="+f.relation.id)
.success(function(data){
$scope.relations[f.id]=data;
});
}
}
}
};
$scope.deleteTables=function(){
console.log($scope.selectedEntities);
var t=[];
for(item in $scope.selectedEntities){
console.log(item)
if($scope.selectedEntities[item].id!=false){
t.push($scope.selectedEntities[item]);
}
}
console.log(t);
$http.post("/deleteTables",t)
.success(function(data){
$scope.currentEntity={};
$scope.selectedEntities=[];
$scope.loadTables();
});
//}
};
});
答案 0 :(得分：1)
只需使用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
'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。
这是不正确的代码。您可以看到::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>
答案 1 :(得分：0)
您可以为每一行插入一个额外的行。
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>