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

Crowley16 · Jun 24, 2004

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:

Code:

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

Thanks

LTeeple · Jun 24, 2004

are the contents of the cells dynamic?

Otherwise, why not just type in the extra characters?

[cheers]

Cheers!
Laura

je150 · Jun 24, 2004

Why not do this

Code:

<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 · Jun 25, 2004

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

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

Crowley16 · Jun 25, 2004

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 · Jun 25, 2004

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:

Code:

<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 · Jun 25, 2004

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 · Jun 25, 2004

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

Crowley16 · Jun 25, 2004

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 · Jun 25, 2004

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 · Jun 25, 2004

here's the code...

sry but no readily available web space

Code:

<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 · Jun 25, 2004

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

Code:

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

Crowley16 · Jun 25, 2004

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 · Jun 28, 2004

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

Code:

.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 · Jun 29, 2004

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

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

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

Crowley16

Technical User

LTeeple

Programmer

je150

IS-IT--Management

Crowley16

Technical User

Crowley16

Technical User

Vragabond

Programmer

Crowley16

Technical User

Vragabond

Programmer

Crowley16

Technical User

Vragabond

Programmer

Crowley16

Technical User

Vragabond

Programmer

Crowley16

Technical User

ChrisHunt

Programmer

Crowley16

Technical User

Similar threads

Part and Inventory Search

Sponsor