Is there any way to repeatedly print a character inside a table cell in HTML (NOT HTML5!)?
*(only using HTML OR using HTML and CSS ONLY)
** Need to print "." through the full length of a cell. Don't know the exact width of the cell!
Is there any way to repeatedly print a character inside a table cell in HTML (NOT HTML5!)?
*(only using HTML OR using HTML and CSS ONLY)
** Need to print "." through the full length of a cell. Don't know the exact width of the cell!
Ok after u elaborated your question I have the solution. A div with a dotted bottom border and text with a white background on top.
example :
CSS:
.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .price{
position:absolute;
right:0;
}
HTML:
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
I accidentally ran into this question and couldn't stop myself from posting my own answer.
I use this method for few years now and I love it for it's simplicity. The whole idea is to use float: left|right for elements with text while the block element surrounding it will produce a margin. We take advantage of this by adding overflow: hidden to the block element.
Another improvement here, is the usage of ::after pseudo-class instead of the actual block element. That makes perfect sense since the dots should act more like the part of the stylesheet.
.line {
padding: 60px 0;
}
.title {
float: left;
}
.price {
float: right;
}
.line::after {
content: "\0020";
display: block;
min-height: 1em;
border-bottom: 1px dotted;
overflow: hidden;
}
<div class="line">
<span class="title">name</span>
<span class="price">123.23$</span>
</div>
If you like coding, you can try something like this:
var tag = [tag];
var h = tag[0].getBoundingClientRect().height;
while(h===tag[0].getBoundingClientRect().height){
tag[0].innerHTML+='-';
};
tag[0].innerHTML=tag[0].innerHTML.replace('-','');
how about making a background image and repeat-x ?
background:url(character.png) repeat-x;
If you are using plain HTML (I mean not using any server generated HTML), write the character more than once. If you are using server generated HTML (like PHP, JSP, etc.), you can write the character more than once or use loop. This cannot be done in client side unless you're using JavaScript.