html - テーブル CSS スタイル - ブロックの継承とデザインの提案

Question

まず第一に、これは気弱な人向けの投稿ではありません。お粗末な構文とひどい 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 構造をそのまま維持したいと考えています。読みやすくする方法についての提案は大歓迎です!

/パトリック