0

首先，这不是一个胆小的人的帖子。请为糟糕的语法和可怕的 HTML 结构做好准备。如果你还在我身边，谢谢你勇敢的灵魂。

看，我有这张表，我想在其中显示信息，但我无法让它看起来像我想要的那样。

这是一个小提琴：http: //jsfiddle.net/wccrjh6d/

由于小提琴，不得不包含一些代码：

table {
    font:normal 12 px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    border-collapse:separate;
    border-spacing:0;
    margin:0 0 1em;
    color:#000;
    }
table a {
    color:#523A0B;
    text-decoration:none;
    border-bottom:1px dotted;
    }
table a:visited {
    color:#444;
    font-weight:normal;
    }
table a:visited:after {
    content:"\00A0\221A";
    }
table a:hover {
    border-bottom-style:solid;
    }
.bigiptable > thead > tr > th,
.bigiptable > thead > tr > td {
    border:1px solid #523A0B;
    border-width:1px 0;
    background:#EBE5D9;
    }
.bigiptable > thead > tr > th > input,
.bigiptable > thead > tr > td > input {
    font-size: 0.9em;
    border-collapse:collapse;
    width:80%;
    }
.bigiptable > head > tr > th,
.bigiptable > head > tr > td {
    white-space: nowrap;
    width: 1px;
}

.bigiptable table a table th {
    border:1px solid #523A0B;
    border-width:1px 0;
    background:#EBE5D9;
    }
.bigiptable > thead > tr > th {
    font-weight:bold;
    line-height:normal;
    padding:0.25em 0.5em;
    text-align:left;
    }
.bigiptable > thead > tr > th > input {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:normal;
    text-align:left;
    background:#EBE5D9;
    border:0px;
    }
.bigiptable > tbody > tr > th,
.bigiptable > tbody > tr > td {
    padding:0.25em 0.5em;
    text-align:left;
    vertical-align:center;
    }
.bigiptable > tbody > tr > th {
    font-weight:normal;
    white-space:nowrap;
    }
.bigiptable tbody tr th a:link,
.bigiptable tbody tr th a:visited {
    font-weight:bold;
    }
.bigiptable tbody td,
.bigiptable tbody th {
    border:1px solid #fff;
    border-width:1px 0;
    }
.bigiptable tbody > tr:nth-child(odd) > th,
.bigiptable tbody > tr:nth-child(odd) > td {
    border-color:#EBE5D9;
    background:#F7F4EE;
    }
.bigiptable tbody > tr:nth-child(even) > th,
.bigiptable tbody > tr:nth-child(even) > td {
    background:#ffffff  ;
    }
.generated {
    font-family: Georgia, Times,serif;
    font-weight: normal;
    font-size:0.8em;
    font-style: italic;
}

a.memberinfo {color:#000; text-decoration:none;}
a.memberinfo b {display:none;}
a.memberinfo:hover {border:0; position:relative; z-index:500; text-decoration:none; border-color:#000; }
a.memberinfo:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #000; background:#ffffee;white-space:nowrap;}
a.memberinfo:hover b em.outer {position:absolute; left:20px; top:-8px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #000; overflow:hidden; z-index:100;}
a.memberinfo:hover b em.inner {position:absolute; left:20px; top:-7px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #ffffee; overflow:hidden;; z-index:100;}

如您所见，有嵌套表，内表中的行也受css样式的影响，我想删除背景颜色和上+下边框。我一直在试图阻止继承，但到目前为止我一直无法做到。

完整表格的视图（混淆）：http: //i.imgur.com/5BHhCLt.png

如果可能的话，我想保持 HTML 结构的完整性。任何有关如何使其更具可读性的建议表示赞赏！

/帕特里克

4

0 回答 0