Html background to the end of the last line

Question

Html background to the end of the last line

Note that the contents of the TD are completely arbitrary. Can I change the label styles to extend the background of the label symbol to the end of the TD cell? Please note that the green background should remain as it is.

<table border=1 width=500>
<tr>
    <td>
        <span>foo and bar</span><br />
        <span>foo and bar</span>
        <span class="mark">¶</span>
    </td>
</tr>
</table>

CSS

.mark {
   background: red;
}

+4

html css

gsf Mar 13 '14 at 20:29

source share

5 answers

Nelson menezes · Answer 1 · 2014-03-13T22:20:31+0000

If you can control the width of the text in td, you can do something like this:

td {
    white-space: nowrap;
    overflow: hidden;
}

.mark {
    display: inline-block;
    width: 100%;
}

Fiddle: http://jsfiddle.net/MMJQW/6/

Sarcoma · Answer 2 · 2014-03-13T22:19:16+0000

Is that what you mean?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>paragraph background colour</title>
<style>
td p {
    overflow: hidden;
}
td span {
    background-color: red;
    padding-right: 100%;
}
</style>
</head>

<body>
<table border=1 width=500>
<tr>
    <td>
        <p>foo and bar<br />
        foo and bar<span class="mark">¶</span></p>
    </td>
</tr>
</table>
</body>
</html>

Morpheus · Answer 3 · 2014-03-13T20:32:59+0000

float: right:

.mark {
   background: red;
   float: right;
}

SaidbakR · Answer 4 · 2014-03-13T21:35:44+0000

, :

.mark {    
    background: red; 
    display:inline;   
    width: 100%;
    clip:rect(0px,420px,20px,0px);   
    position: absolute;
}

http://jsfiddle.net/MMJQW/5/

HerrSerker · Answer 5 · 2014-03-13T22:36:50+0000

CSS.

You need JavaScript to calculate the left offset of the parent td, and then set the widthspan

Something like this (jQuery)

var m = $('.mark');
var p = m.parent();
m.width(  p.width() - m.position().left)

http://jsfiddle.net/MMJQW/8/

Html background to the end of the last line

More articles: