使用CSSはTdとの国境を超えるTrの境界底が表に

を左に取得する私は、テーブルに問題ました：http://jsfiddle.net/ex6ZR/252/使用CSSはTdとの国境を超えるTrの境界底が表に

.tr td{ 
     border-bottom: 2px solid black; 
    } 

    .td1{ 
     border-right: 3px solid blue; 
    }

を私の目標は、（すべてのTRに沿って）下のボーダーを得ることですオーバーライドTd Leftボーダー。

それはtd.bottomボーダー幅> td.leftボーダー幅の作品ではなく、下の境界thiner（と、それは私が探してんだよ）

私が使用して多くの解決策が見つかりました：&前にブロックが、絶対的な位置だけで動作します（テーブルにあるので設定できません）。

マイ結果：予想

Current Result

結果：

Result expected

EDIT：Jsfiddleに失敗しました：

：良いものが、今ここに

EDIT 2はX

この問題は、Jess Bartのおかげで解決されました。私はjsfiddleを更新しました、その結果は素晴らしいです：

table{ 
      border-collapse: collapse; 
     } 
     td{ 
      position: relative; 
      border:1px solid black; 
     } 
     td::after { 
      border-right:1px solid orange; 
      content:''; 
      height: 100%; 
      top: 0; 
      right: -1; 
      position: absolute; 
     }

出典

2017-12-29 Rémi Lamotte

を、あなたがテーブルを使用することが義務付けられていますか？ –

あなたがそれを見ることができるなら私はJsfiddleを更新しました。境界線の代わりにアウトラインを使用すると、望ましい結果が得られます。 – Eskinder

@Temaniはい私は次のようにします。 Eskinder、Jsfiddleが間違っていた：x初めて申し訳ありません。私はstackoverflowで投稿しています –

あなたはこのコードを試すことができます。

<html> 
<head> 
    <style> 
     table{ 
      border-collapse: collapse; 
     } 
     td{ 
      position: relative; 
      border:1px solid black; 
     } 
     td::after { 
      border-right:1px solid orange; 
      content:''; 
      height: 100%; 
      top: 0; 
      right: -1; 
      position: absolute; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
    </table> 
</body> 
</html>

出典

2017-12-29 13:41:40 Ananta

1）あなたは質問をお読みになりましたか？ 2）CSSはHTMLなしでどのように動作するのですか？ –

cssはjsfiddleで置き換えるCSSです。あなたもその質問を読んでいますか？ – Ananta

はい私はそれを読んで:)そして私はこれを見ます私の目標はあなたの結果ではない –

使用CSSはTdとの国境を超えるTrの境界底が表に

答えて

関連する問題