列のHTMLテーブルの部分的な境界

"名前"という列の右側に境界線を作成しようとしています。私はそれが行 "名前"の上端の50％から行くことを望んで、それはコストの行の下にすべての方法を行くが、コスト行で、私はまたそれが50％それはテーブルの最下部には届かない。誰かが私にこれを達成する方法を教えてもらえますか？列のHTMLテーブルの部分的な境界

icon { 
 
    position: absolute; 
 
    left:-10rem; 
 
    top:-19rem; 
 
} 
 

 
table { 
 
    border-top: 5px solid black; 
 
    border-bottom: 5px solid black; 
 
    margin-bottom: 10rem; 
 
    width:70%; 
 
    border-collapse: collapse !important; 
 
    border-spacing: 0 !important; 
 
    } 
 
    th { 
 
    text-align:center!important; 
 
    background-color: green; 
 
    padding: 1rem !important 
 
    } 
 
    td { 
 
    text-align:center; 
 
    line-height:.8em !important; 
 
    background-color: gray 
 
    } 
 
    .services { 
 
    font-weight:bold; 
 
    text-align:left; 
 
// border-right: 1px solid black !important; 
 
    } 
 
    .pricing{ 
 
    font-weight:bold; 
 
    }

<img src="http://lorempixel.com/200/200/cats/" style="width:50px;height:50px" class="icon"/> 
 
<table class="table borderless"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Plan A</th> 
 
     <th>Plan B</th> 
 
     <th>Plan C</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="services">Description 1</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 2</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 3</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 4</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 5</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 6</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 7</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 8</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 9</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr class="pricing"> 
 
     <td style="padding-bottom: 2rem !important;" class="table-services">Cost</td> 
 
     <td>Price A</td> 
 
     <td>Price B</td> 
 
     <td>Price C</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-05-23 J.Rem

は、あなたはそれが最終的に見えるようにしたいもののスクリーンショットを投稿できますか？ –

.cssファイルのコードとは何ですか？それはhtmlファイルに含まれていますか？ – janek1

ちょうどCSSと、私がやろうとしているもののスクリーンショットで編集 –

は、擬似要素と境界線を描画します。

table { 
    border-collapse: collapse; 
    border: 0 solid; 
    border-width: 2px 0; 
} 
th, td { 
    position: relative; 
} 
th:first-child:before, 
td:first-child:before { 
    content: ""; 
    position: absolute; 
    width: 1px; 
    background: black; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 
th:first-child:before { 
    top: auto; 
    height: 50%; 
} 
tr:last-child td:first-child:before { 
    bottom: auto; 
    height: 50%; 
}

jsFiddle

や背景グラデーションを使用します。

table { 
    border-collapse: collapse; 
    border: 0 solid; 
    border-width: 2px 0; 
} 
th:first-child, 
td:first-child { 
    background: linear-gradient(black 50%, black 50%) top right/1px 100% no-repeat; 
} 
th:first-child { 
    background-position: bottom right; 
    background-size: 1px 50%; 
} 
tr:last-child td:first-child { 
    background-size: 1px 50%; 
}

jsFiddle

出典

2017-05-23 16:23:36 Stickers

これは動作しているようですが、テーブルの左上隅に小さなアイコンがありますが、これを追加すると、最初のヘッダー行の内側のアイコンの部分が表示されません。アイコンは.icon { position：absolute;}を使用しています。左：-8rem; top：-14rem; } –

@ J.Remおそらく、相対位置がテーブルセルに追加されているためです。そのアイコンをテーブルから移動したり、絶対位置を使用したりできませんか？バックグラウンド勾配と位置プロパティのない別のソリューションも追加しました。 – Stickers

私は、この解決策では、Firefoxでは、最初の行/最初のヘッダーの下端で境界が少し外れているように見えます。何故ですか？どうすれば修正できますか？ –

-1

:first-child()擬似要素を使用してみてください：

table.borderless { 
    tbody { 
     tr { 
      td { 
       &:first-child { 
        border-right: 2px solid black; 
       } 
      } 
     } 
    } 
}

出典

2017-05-23 16:20:20 broodjetom

あなたはちょうど私がhahahaを持っているものをコピーしました – broodjetom

はい、それは彼が望むものですが、テーブルセルは取り除かれる必要があります。 – broodjetom

pseudoelementを使用して...

td:nth-child(1) { 
 
    width: 275px; 
 
} 
 

 
table { 
 
    position: relative; 
 
    border-top: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
} 
 

 
table:after { 
 
    content: ""; 
 
    height: 215px; 
 
    width: 1px; 
 
    background: black; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 100px; 
 
}

<table class="table borderless"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Plan A</th> 
 
     <th>Plan B</th> 
 
     <th>Plan C</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="services">Description 1</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 2</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 3</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 4</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 5</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 6</td> 
 
     <td>Not Included</td> 
 
     <td>Not Included</td> 
 
     <td class="included"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 7</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 8</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="services">Description 9</td> 
 
     <td>Limited</td> 
 
     <td>Hight Quality</td> 
 
     <td>Customized</td> 
 
    </tr> 
 
    <tr class="pricing"> 
 
     <td style="padding-bottom: 2rem !important;" class="table-services">Cost</td> 
 
     <td>Price A</td> 
 
     <td>Price B</td> 
 
     <td>Price C</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-05-23 16:26:17 sol

ここで参照が

です

<table cellspacing="0"> 
<tbody> 
    <tr> 
     <td class="col-header"> <span class="">Name</span> 
     </td> 
     <td class="col-header"> <span class="">Plan A</span> 
     </td> 
     <td class="col-header"> <span class="">Plan B</span> 
     </td> 
    </tr> 
    <tr> 
     <td class="col-header highlight"> 
     </td> 
     <td > 
     </td> 
     <td class=""> 
     </td> 
    </tr> 
    <tr> 
     <td class="text">description 1 
     </td> 
     <td class="text-center">v 1-1 
     </td> 
     <td class="text-center">v 1-2 
     </td> 
    </tr> 
    <tr> 
     <td class="text">description 2 
     </td> 
     <td class="text-center">v 2-1 
     </td> 
     <td class="text-center">v 2-2 
     </td> 
    </tr> 
    <tr> 
     <td class="col-header text"><span class="mobile-photo">Cost</span> 
     </td> 
     <td class="col-header"> <span class="mobile-photo">Price A</span> 
     </td> 
     <td class="col-header"> <span class="mobile-photo">Price B</span> 
     </td> 
    </tr> 
</tbody>

CSS

.col-header{ 
width: 100px; 
height: 20px; 
text-align: center; 
color: black; 
vertical-align:middle; 
position: relative; 
} 
.col-header > span { 
display: block; 
position: absolute; 
width: 100%; 
height: 100%; 
top: 15px; 
z-index:2; 
vertical-align: middle; 
line-height: 20px; 
} 

.col-header.highlight{ 
border-right-color: #ff0000; 
border-right-style: solid; 
} 

.text-center{ 
text-align:center 
} 
.text{ 
width:100px; 
border-right-color: #ff0000; 
border-right-style: solid; 
}

出典

2017-05-23 17:22:12 neuropaddy

列のHTMLテーブルの部分的な境界

答えて

関連する問題