3

ここのフィドルで私の問題のフィドルを作成しました： http://jsfiddle.net/tpSjf/

テーブルに境界線を追加していますが、行に対してのみ、境界線によってテーブルの幅が 2px 拡張されるため、幅を 938px にしました。これにより、幅の問題は修正されますが、ヘッダーの画像の一部が切り取られます。

オーバーフローは背景なのでうまくいかないようです。

なぜ私がテーブル全体の境界線を設定しなかったのか疑問に思われるかもしれません.丸みを帯びた角と背景画像は、角が透明であるため「悪魔の角」を取得します.

HTML の例

<table class="table_style orange_header" class="ajax_table" style="font-size:12px;">
    <tr>
        <th style="width:248px;">Name</th>
        <th style="width:314px;">Email</th>
        <th style="width:237px;">Last Login</th>
        <th style="width:75px;">Options</th>
    </tr>
    <tr class="alternate">
        <td><a href="#">Example name</a></td>
        <td>Example Email</td>
        <td>Examlpe Email</td>
        <td><a href="#">Edit</a><a class="crossbtn" href="#"></a></td>
    </tr>
</table>

CSS の例

table { border-collapse:collapse; border-spacing:0; table-layout: fixed; }

.table_style {
    width: 938px;
    overflow:visible;
}
th {
    height: 45px;
}
.alternate {
    height: 50px;
    background-color: #f0f0f0;
    border-left: #888 1px solid;
    border-right: #888 1px solid;
}
.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat;
}

モニターが問題を確認するのに十分な幅がない場合は、jsfiddle の出力を拡大してください。

4

8 に答える 8

1

私はそれを少しいじっています。

th の幅を変更し、次の CSS を追加しました

tr {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   display: block;
}

これにより、テーブルが希望どおりに表示されました。

これが更新されたjsfiddleです

これでうまくいったかどうか教えてください。

編集:行に表示ブロックを与え、テーブルの幅に 2 px を追加しました。これでうまくいくはずです。（返事が遅くなってごめん）

于 2013-05-28T15:54:51.247 に答える
1

これは、tr の背景に関する古い問題です。解決策は、境界線を使用しないことです。テーブルの境界線の色で 1x1 ピクセルの画像を作成する必要があります。問題は、tr の各 td に適用されるため、背景イメージを tr に適用できないことです。したがって、1x1 の背景画像を最初と最後の td に適用する必要があります。フィドルで結果を確認できます。

http://jsfiddle.net/poselab/EF8TW/

.alternate{
height: 50px;
    background: #F0F0F0
}
.alternate .first{
    background: url(http://farm4.staticflickr.com/3766/8876247477_be36f613d0_o.gif) repeat-y 0 0;
}
.alternate .last{
    background: url(http://farm4.staticflickr.com/3766/8876247477_be36f613d0_o.gif) repeat-y right 0;
}

編集：

テーブルが任意の幅で機能するように改善できます。これを行うには、ヘッダー用に 3 つの画像を作成する必要がありthます。IE8では機能しないため、cssセレクターなどは使用できませんが、使用できますthth:last-child:first-child

于 2013-05-28T23:57:18.500 に答える
0

簡単な変更であなたのフィドルを更新しました。

ここはfiddle 

background-size: 938px 44px;

この1つの変更だけで十分です..

注: これは CSS3 プロパティです。CSS2 または古いブラウザーでサポートするには、画像を編集してサイズを設定する必要があります.

class=orange_header と border=0 を割り当てる別の tr/td を作成すると、回避策があります。

これがあなたに前向きな洞察を与えることを願っています..

于 2013-05-28T11:23:12.093 に答える
0

さて、境界線は表の外にあります

したがって、テーブル内のヘッダーが残りのヘッダーより2px大きいようにする方法はありません

代わりに、css3 を使用して同じ効果を確認することをお勧めします。

重要な部分は次のとおりです。

border-radius
background-position

http://jsfiddle.net/Rzc7F/

これはあなたが望んでいたように見えると思います

このアプローチに代わる方法は、このテーブルを 2 つの要素に分割することです。

最初は、ヘッダーを含む div/image/table (できれば div) になります

2番目の要素は、オレンジ色のヘッダーがないだけで、フィドルのようなテーブルになります

于 2013-05-23T22:59:33.277 に答える
0

誰かがすでに csspy を提案していましたが、IE8 では各コーナーを異なる方法で丸めるサポートはないと述べられていました。ややこしいかもしれませんが ( http://css3pie.com/documentation/known-issues/ )、サポートされています。略記法を使ってみましたか？

PIE が解析するすべての CSS プロパティについて、それらのプロパティの簡略版のみが認識されます。たとえば、border-radius はサポートされていますが、個々の手書きの border-top-left-radius などのプロパティはサポートされていません。

したがって、border-top-right-radius:10px; 動作しませんが、border-radius:0 10px 0 0; 動作します。-pie-border-radius:0 10px 0 0; を追加する必要がある場合もあります。

于 2013-05-28T18:37:42.273 に答える
0

私はポーズラボに同意します。トー、テーブルを拡張可能にするためにいくつかの変更を加えました。たとえば、 td のすべての行には、 .alternate スタイルの行だけでなく、ヘッダーにいくつかの変更が加えられているだけでなく、左右の境界線があり、グラフィックのサイズを変更せずに間に列を追加できます。

http://jsfiddle.net/jennift/eEQEh/

.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_bac ground_zps47f8dbe4.png) no-repeat top;}

.leftside {
    background:#FFF url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat 0 0;}

.rightside {
    background:#FFF url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat right 0;}

td:first-child {
    background: url(http://i.stack.imgur.com/iYfYI.gif) repeat-y 0 0;}

td:last-child {
    background: url(http://i.stack.imgur.com/iYfYI.gif) repeat-y right 0;}
于 2013-05-29T04:09:27.503 に答える
0

最善を尽くした...

http://jsfiddle.net/tpSjf/1/

.table_style {
    width: 938px;
    overflow:hidden;
    display: table-cell;
}

.orange_header {
    background:url(http://i1135.photobucket.com/albums/m621/Iwuqisubu/orange_table_background_zps47f8dbe4.png) no-repeat;
    background-size: 701px 55px;
}

これをチェックして..

背景画像のサイズを変更する必要があると思います..

于 2013-05-09T10:47:58.987 に答える