2

我有一个 Struts2 应用程序，我在其中使用带有“显示”标签的分页。这是显示代码

<display:table id="reqtablenew" name="requestlist" requestURI="" pagesize="4" class = "newreqtable">

    <display:column title="Select" >
    <input type="radio" name="reqradio" />
    </display:column>

    <display:column title="Request ID" property="requestid"></display:column>
    <display:column title="Requestor" property="requestor"></display:column>
    <display:column  title="Approver" property="approver"></display:column>
    <display:column  title="Status" property="status"></display:column>
    <display:column  title="Product" property="product"></display:column>
    <display:column  title="Version" property="version"></display:column>
    <display:column  title="Source" property="source"></display:column>
    <display:column  title="Destination" property="destination"></display:column>

</display:table>

虽然它有效，但是当我将样式应用于表时，在其类名“newreqtable”下，我发现它正在遵循 表格的渲染

任何关于我可能做错的想法都将非常受欢迎。这是相关的 css ： 表的 css

这是一个显示相关 css http://jsfiddle.net/Gz668/的小提琴

4

1 回答 1

2

代码中有几个问题，如果您有兴趣更深入地了解它们，只需查看第 4 个（您的）和第 5 个（我的）小提琴版本之间的区别：

  • 一些选择器是错误的（.something table表示具有类的对象的表后代.something，您希望table.something以该类为目标的表）；
  • 一些属性是错误的（几乎所有的-moz东西都搞砸了。jsFiddle 通过将它们涂成红色来提醒你）；
  • 又设置了很多默认属性，比如text-align:leftor color: #000000；这不是错误，但会产生噪音并阻止您更快地工作；
  • 表display:table默认有，并且不能环绕边框。将其设置为显示块或（像我一样），使用外部 div 创建边框和阴影；
  • 使用我在小提琴中链接的CSS Resetnormalize.css来删除浏览器默认应用的所有不需要的东西，并更好地控制您的代码。

看看running example。

代码也更小：

div.borderDiv{
    border: 1px solid black;
    border-radius: 14px;
    box-shadow: 10px 10px 5px #888888;
    width: 80%;
}

.newreqtable {    
    width:100%;
}


.newreqtable th:first-child {
    border-top-left-radius:14px;    
}
.newreqtable th:last-child {
    border-top-right-radius:14px;
    border-right: none;
}
.newreqtable tr:last-child td:first-child {
    border-bottom-left-radius:14px;
}
.newreqtable tr:last-child td:last-child {
    border-bottom-right-radius:14px;
}

.newreqtable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.newreqtable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.newreqtable tr:last-child td:last-child {
    border-width:0;
}


.newreqtable tr:hover td {
    background-color:#ffaaaa;
}
.newreqtable td {
    vertical-align:middle;
    background-color:#ffffff;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    padding:7px;
    font-size:10px;
    font-family:Helvetica;
    font-weight:normal;
}
.newreqtable th {
    background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000));
    background:-moz-linear-gradient(center top, #ff5656 5%, #7f0000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");
    background: -o-linear-gradient(top, #ff5656, 7f0000);
    background-color:#ff5656;
    border-color:white;
    border-style: solid;
    text-align:center;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
    border-width:0px 1px 1px 0px;
}
于 2013-11-14T00:33:23.880 回答