テーブルのtbody上の：after擬似要素に完全な幅の下限を作成するにはどうすればよいですか？

Question

今、私はテーブル内の各tbodyにボトムボーダーを追加しようとしています。 現在、私は通常tr要素の周りに境界線を持っていますが、tbodyに下限線を追加しながらそれらの要素を保持したいと思います。

私は現在、私のソリューションで擬似要素を使用していますが、何らかの理由で擬似要素の背景が100％の幅ではないという理由で効果が得られます。

tbody要素にフル幅のボトムボーダーを作成する方法を知りたいのですが、tr要素の枠線を維持していますか？ https://jsfiddle.net/4eucexwb/

私はあまりにものJavaScript/jQueryのソリューションを開いている：

は、ここに私の現在の問題のフィドルです。

Answer 1

擬似要素をスタイリングするのではなく、::スタイルの後にborder-bottomをtbodyに指定します。

.table tbody{ 
    border-bottom: 0.5rem solid #e6e6f5; 
} 

編集： ラインで、あなたのコード行を読んだ後、あなたのソリューションはHEREです。擬似要素をテーブル行として作成しています。テーブルのサイズは4 tdです。したがって、擬似要素の幅は最初のtdになります。問題はポジションだった。テーブルクラスにはposition: relative;、疑似要素にはposition: absolute;、幅はいくつか与えました。さらに、より質の高いスタイルのために、メディアクエリに幅の基準を設定することができます。

CSSが更新されました。

html { 
    font-size: 13px; 
    padding: 2rem; 
} 

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

.table { 
    margin-bottom: 1rem; 
    width: 100%; 
    background-color: #fff; 
    position: relative;   //----First change 
    thead { 
    text-align: left; 
    background-color: #e6e6f5; 
    th { 
     padding: 0 0.75rem; 
    } 
    } 
    tbody { 
    &:after { 
     content: ''; 
     display: table-row; 
     background: #e6e6f5; 
     height: 0.5rem; 
     border-left: 1px solid #d0d0dd; 
     border-right: 1px solid #d0d0dd; 
     position: absolute;  //-----Second change 
     width: 99.7%;   //------Third change 
    } 
    &:last-child:after { 
     border-bottom: 1px solid #d0d0dd; 
    } 
    } 
    tbody, 
    tfoot { 
    td { 
     padding: 0 0.75rem; 
    } 
    } 
    tr { 
    height: 1.75rem; 
    border: 1px solid #d0d0dd; 
    } 
} 

Answer 2

私はKhurramsソリューションを少し修正しました。これはあなたが望むものだと思います。

html { 
    font-size: 13px; 
    padding: 2rem; 
} 

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

.table { 
    margin-bottom: 1rem; 
    width: 100%; 
    background-color: #e6e6f5; 
    thead { 
    text-align: left; 
    background-color: #e6e6f5; 
    th { 
     padding: 0 0.75rem; 
    } 
    } 
    tbody { 
    background-color: #fff; 
    &:last-child:after { 
    border-bottom: 1px solid #d0d0dd; 
    } 
    &:after { 
     content: ''; 
     background-color:#e6e6f5; 
     display: table-row; 
     height: 0.5rem; 
     border-left: 1px solid #d0d0dd; 
     border-right: 1px solid #d0d0dd; 
    } 
    } 
    tbody, tfoot { 
    td { 
     padding: 0 0.75rem; 
    } 
    } 
    tr { 
    height: 1.75rem; 
    border: 1px solid #d0d0dd; 
    } 
} 

テーブル（＃e6e6f5）とtbody（white）の要素に背景色を付けました。その後、ソリューションはほぼ90％です。最後に、tbody：after擬似要素に＃e6e6f5の背景色を付けることです。

これが役に立ちます。

よろしくお願いいたします。