1

いくつかのデザインに小さな問題があります。問題は、テーブルの上部または下部にある行の背景色が端に「ぶら下がっている」ように見えることです。背景色はまだテーブル スタイルを適用していると思いますが、私の人生ではこれを理解できません (私はデザイナーではありません!)。ここにJfiddle：

http://jsfiddle.net/UFcqB/

HTML:

<div class="stats_table">
        <table cellspacing="0">
            <tr class="tablehead">
                <th>ID</th>
                <th>Name</th>
                <th>Contact Person</th> 
                <th>Contact Number</th>
                <th>Email Address</th>
                <th>Status</th>
                <th>Location</th>
                <th class="modify">Options</th>
            </tr>
            <tr class="second_row">
                <td>1</td>
                <td>Test Agency cc.</td><td>John Doe</td>
                <td>0112131232</td>
                <td><a target="_blank" href="mailto:jd@testagency.co.za">jd@testagency.co.za</a>    </td>
                <td>Active</td>
                <td>Hatfield</td>
                <td class="modify">
                    <a onclick="return false;" href="#"><img title="View Agency Details" src="img/icons/list_small.png"></a>
                    <a onclick="return false;" href="#"><img title="Disable Agency" src="img/icons/delete_small.png"></a>
                </td>

            </tr>
        </table>
</div>

CSS:

table {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E2E2E2;
    border-collapse: separate;
    border-radius: 20px 20px 20px 20px;
    moz-border-radius: 20px 20px 20px 20px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    line-height: 1;
    font-size: 12px;
    width: 100%;
}

th {
    padding: 5px 10px 5px 10px;
}

td {
    padding: 5px 10px 5px 10px;
    text-align: left;
}

.tablehead {
    background-color: #E9E9EA;
    color: #747070;
    text-align: left;
}

.second_row {
    background-color: #DFEFFC;
}

助けてくれてありがとう！

4

3 に答える 3

8

追加する場合:

 overflow: hidden;

テーブルの CSS に対して、行の角を非表示にします。

于 2013-06-28T18:44:35.857 に答える
0

これは、最初の行の上部にまだシャープな境界線があり、それらが互いにオーバーライドしている間に、テーブルの境界線に半径係数があるためです。何らかの理由でオーバーフローを使用したくない場合は、テーブルとその正確な tr の両方の下に radius 要素を配置し、半径を 2% などの比率ではなく、5px などの固定数に設定することを忘れないでください。両方の境界線は同じ形状になり、その問題は発生しません。

于 2021-09-20T07:52:43.260 に答える