is it possible to fill the empty sections of a td with characters? 2

[Crowley16]

I have a table, and a tr and a td

the td's are
<tr>
<td width="85%">textTextText</td>
<td width="15%">Text</td>
</tr>

what I'd like to do is to fill the missing parts of the first td with a character, eg to display like:

<-----------------col-----------------> <-col->
textTextText ..........................  Text

Thanks

 

[LTeeple]

are the contents of the cells dynamic?

Otherwise, why not just type in the extra characters?


Cheers!
Laura

 

[je150]

Why not do this

<tr>
   <td width="15%">textTextText</td>
   <td>......................</td> 
[COLOR=red]*must be enough "." to fill 70 percent*[/color]
   <td width="15%">Text</td>
</tr>

I think your trying to make one side of a table match with the other. Of course you could nest that table inside another one so that if <table size =100%> is resized in the browser the "........" would get pushed onto another line. As for putting it in the same <td> and filling it i think you would have to make this dynamic unless all the text in the first <td> is the same length, then its that much easier.

 

[Crowley16]

yes, the contents of the td's are dynamic...

it's from an xml document, that I'm converting with xslt

 

[Crowley16]

je150, I tried doing the 3rd td in the middle thing, however the ...s doesn't line up for the td's with shorter texts in them...

I'm thinking that I could put a span in the 1st td and fill that span with ...s, but I'd still like to keep everything in the same line...

any suggestions?

Thanks

 

[Vragabond]

Okay, you could probably call this cheating, but it is the effect you are looking for, right?

1. Create a gif file with a black (or your text color) dot and transparent background. Make sure that there is enough transparency around to create a nice effect.
2. Code your table cell like this:

<style type="text/css">
 .leadingdot {
   background: url(leadingdot.gif) 1px 10px repeat-x;
 }
 .leadingdot span {
   background: #ffffff; /* or whatever color you use */
 }
</style>

<table style="width: 100%;">
 <tr>
  <td class="leadingdot">
   <span>Text</span>
  </td>
  <td style="width: 30px;">
   text
  </td>
 </tr>
</table>

What this does is create a table with two columns of which the right one is very narrow. The left one is wide but has short text. The text has white background, while remaining cell repeats the black dot horizontally and creates the effect of a leading dot. You can play with the background-position to position the dots in the right place (in my code, those are the numbers right after the url). There should be no dots where the text is because text has a solid color background.

This I haven't tested but should work in theory.

 

[Crowley16]

vragabond

OOOO...

Soo close...

I've got some text-indents in some of the tds...
and the background is showing through the indents, so is there anyway to stop that?

Also, if anyone can think of another way, then that'd be welcome as well...

Thanks...

 

[Vragabond]

Just apply the text-indents to the <span> element. That will make the span grow and dots won't be visible.

 

[Crowley16]

I tried applying the indent to the span tags, however the dots are still showing up...

looks like the span's background only applies to the visible text...??

 

[Vragabond]

Do you have an example of this? Best would be URL or at least your code (but the problem is that I can't create the dotted gif file here to try and duplicate the problem. How are you applying this idents? I know that if you use padding on the span, the background will be honoured under every part.

 

[Crowley16]

here's the code...

sry but no readily available web space

<xsl:if test="./@id != ''">
   <tr>
      <td class="dots">
          <span class="noDots" style="text-indent:40px;"><xsl:value-of select="@id"/></span>
      </td>
      <td>page</td>
   </tr>
</xsl:if>

Thanks...

 

[Vragabond]

If you change text-ident to padding-left the dots are gone.

<span class="noDots" style="padding-left: 40px;"><xsl:value-of select="@id"/></span>

 

[Crowley16]

ahhahahaaaa

thank you very much, works now

have a star..

by the way, another star available if anyone can think of a way of doing this easier, without the use of seperate gif file...

 

[ChrisHunt]

This ought to work (though I've only tested it in IE6), it uses the same <span> arrangement as you have now:

.dots {
   border-bottom: 1px dotted black;
}

.nodots {
   background-color: white;
   position:relative;
   padding-bottom:2px;
}

Unfortunately, IE renders "dotted" borders with short dashes, dunno if other browsers get it right.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Crowley16]

Yep, that works also chris...

just like you said, I get small dashes but that's fine...

also I used a padding: 0px; on the .dots to stop it showing a . at the beginning of the td...

Thanks...

Have a star