2

私は一日中このスタイルの問題を解決しようとしてきましたが、無駄でした。

http://jsfiddle.net/9HP9Q/1/

テーブルラインの周囲には灰色の境界線が必要です。InternetExplorer8を除くすべてのブラウザで正常に動作します。

.order_table table {
  border-collapse: collapse;
}
.order_table table tbody tr {
   border: 1px solid #DEDEDE;
}

それは確かに最初のものを除いてテーブル全体に境界線を与えます<TD>が、それから私はそれを使ってそれを強制しようとしました

.order_table table td.product_format {
  border-bottom: 1px solid #DEDEDE;
  border-top: 1px solid #DEDEDE;
}

しかし、それは機能しませんでした。誰かが私を正しい道に導くことができますか？

4

2 に答える 2

2

問題：

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //IE put the background color upside the border
   background-color: #FAFAFA;
}

ソリューション：

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //Deleted the background-color
}

作業例:

http://jsfiddle.net/9HP9Q/2/

于 2012-12-07T11:25:29.797 に答える
2

フィドルhttp://jsfiddle.net/9HP9Q/3/でそのような出力が必要だと思います

見やすいように色を赤に変更したので、必要に応じて変更してください。

.product_name {
font-size: 30px;
font-family: 'MisoBold';
text-transform: uppercase;
color: #3F3F3F;
}
.order_table table {
margin-left: 0px;
width: 390px;
xheight: 100px;
border-collapse: collapse;
}
thead {
border-bottom: 1px solid #D5D3D0;
margin-bottom: 5px;
}

.order_table table {
border-collapse: collapse;
}
.order_table table tbody tr {
/*border: 1px solid #DEDEDE;*/
    border: 1px solid red;
/*background-color: #FAFAFA;*/
}
.order_table table td.product_format {
border-collapse: collapse;
padding-left: 20px;
font-weight: bold;
/*border-bottom: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE;*/
border-color: #DEDEDE;
position: relative;
height: 1px;
}
.price-promo {
top: 0 !important;
}
.qty_selector {
padding: 0px;
background: none;
border-top: none;
float: left;
  clear: both;
}
input[type="text"] {
width: 58px;
border: 1px solid #DEDEDE;
color: #333;
height: 23px;
padding-left: 8px;
overflow: hidden;
}
.qty_selector .qty_btn {
width: 11px;
margin-top: -2px;
padding-left: 3px;
background: none;
height: 32px;
  display: inline-block;
  vertical-align: middle;
}
.qty_selector .qty_btn a {
width: 11px;
padding: 0px;
background: none;
float: left;
margin: 1px 5px 1px 0;
}
.order_table table td {
vertical-align: middle;
padding: 7px;
}
.order_table table td.unit_price {
padding-right: 0;
text-align: center;
}
.unit_price .pricebykg {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
}

不要なコードをコメントしました。

あなたの質問を理解するのに遅れている場合はお知らせください。

于 2012-12-07T11:32:43.913 に答える