5

私はborder-rightテーブルの上にあり、テーブルが同じままにならないので、上下から数ピクセル短く、できれば高さの 80 ~ 90% にしたいと考えて<td>います。

このような:

ここに画像の説明を入力

これは可能ですか?

table{
  border-right: 1px solid #f00; 
}

フィドル

4

3 に答える 3

3

疑似要素でそれを行うことができます:

table {
    position: relative;
}

table:after {
    position: absolute;
    border-right: 1px solid #f00; 
    content: "";
    top: 5%;
    bottom: 5%;
    right: -1px;
}

例: http://jsfiddle.net/hY6Te/11/

于 2013-08-27T11:52:04.840 に答える
1

追加のマークアップは許容されますか?

フィドル

<div id="wrapper">
    <table width="200" height="100" bgcolor="#eee0e0">
        <tr>
            <td>TEXT</td>
        </tr>
    </table>
</div>

table{
  border-right: 1px solid #f00; 
}

#wrapper {
    background: #eee0e0;
    padding: 20px 0;
    display: table; /* necessary for shirnk wrapping (inline-block would also work)
}
于 2013-08-27T11:52:02.840 に答える