テーブルのCSSを使用したリボン

Question

テーブルにリボンを作成していますが、いくつかの問題に直面しています。 私はテーブルのリボンを作ることができません。どのようにそれは非常に奇妙に見えるいくつか。多分

.sash { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 300px; 
 
} 
 
.sash:after { 
 
    content: "Sash"; 
 
    position: absolute; 
 
    width: 90px; 
 
    height: 30px; 
 
    background: red; 
 
    top: 0; 
 
    right: 0; 
 
    transform: rotate(49deg); 
 
}

<table style="border:1px solid black" class="sash"> 
 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100"></td> 
 
    </tr> 
 
</table>

Answer 1

：

.sash tr td:last-child { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 300px; 
 
} 
 
.sash tr td:last-child:after { 
 
    content: attr(data-ribbon); 
 
    position: absolute; 
 
    width: 90px; 
 
    height: 30px; 
 
    background: red; 
 
    top: 5px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    right: -12px; 
 
    transform: rotate(49deg); 
 
}

<table style="border:1px solid black" class="sash"> 
 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100" data-ribbon="One"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100" data-ribbon="Two"></td> 
 
    </tr> 
 
</table>

：各行について

.sash { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 300px; 
 
} 
 
.sash:after { 
 
    content: attr(data-ribbon); 
 
    position: absolute; 
 
    width: 90px; 
 
    height: 30px; 
 
    background: red; 
 
    top: 5px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    right: -27px; 
 
    transform: rotate(49deg); 
 
}

<table style="border:1px solid black" class="sash" data-ribbon="Sach"> 
 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>one line text</td> 
 
    <td>two line text</td> 
 
    <td>three line text</td> 
 
    <td>four line text</td> 
 
    <td width="100"></td> 
 
    </tr> 
 
</table>