Peter: Tabellenzeile, Wort und Rest auffüllen mit ............

Hallo,
wer hab mir eine Idee wie ich folgendes realisieren könnte:

In eine Tabelle sind zwei Spalten, in die erste Spalte soll nach dem Wort, nehem wir die erste Zeile  nach "Wurstwecken" der Rest der Zeile bis zum Ende der Spaltenbreite der Leerraum mit Punkten, wie unten dargestellt, aufgefüllt werden. Gibt es da eine Möglichkeit, ein Befehl, Hintergrundbild... der das bewerkstelligen kann. Die Punkte sollen quasi als Lesehilfe für die Augen bis zu den Preisangaben dienen. Ich möchte nicht <tdcolor> verwenden.

Wurstwecken .........  EUR 2,50
Brot ................  EUR 2,79
Salami, Ungarische ..  EUR 5,88

Wäre klasse, wenn jemand da eine Idee hätte,
Grüße von Peter

  1. Hallo Peter,

    Hintergrundbild ist richtig, am unteren Rand über die ganze Zeile wiederholt. Der Begriff in der Zelle muss man dann in einen Span-Bereich setzen und eine Hintergrundfarbe hierfür definieren, sodaß die gepunktete Linie abgedeckt wird. Damit die Linie nicht unmittelbar an deinen Begriff ranreicht, einfach ein Leerzeichen nach dem Begriff einfügen.

    Mfg Wurstwecken

    1. Wurstwecken,

      Damit die Linie nicht unmittelbar an deinen Begriff ranreicht, einfach ein Leerzeichen nach dem Begriff einfügen.

      Pfui. Dafür gibt’s doch padding-right.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
  2. Hallo Peter,

    In eine Tabelle sind zwei Spalten, in die erste Spalte soll nach dem Wort, nehem wir die erste Zeile  nach "Wurstwecken" der Rest der Zeile bis zum Ende der Spaltenbreite der Leerraum mit Punkten, wie unten dargestellt, aufgefüllt werden.

    <td class="punkte">&nbsp;</td>

    .punkte { background:transparent url(punkte.png) repeat-x right bottom; }

    Du benötigst nun noch ein Hintergrundbild mit den Punkten und eine dritte Spalte, die nur diese enthält. Andernfalls werden vermutlich auch unter dem Text Punkte zu sehen sein.

    Eine ungewöhnliche Lösung: http://tantek.com/CSS/Examples/dotleaders.html

    Grüße
     Roland

    1. Du benötigst […] eine dritte Spalte,

      Nö, Orlando. Wäre auch nicht schön, das Markup zu verunstalten, um Darstellungseffekte zu erziehlen.

      werden vermutlich auch unter dem Text Punkte zu sehen sein.

      Dagegen kann ja mit CSS Abhile geschaffen werden.

      Eine ungewöhnliche Lösung: http://tantek.com/CSS/Examples/dotleaders.html

      … die mit vernünftiger Auszeichnung mit HTML auch gar nichts gemein hat.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
  3. Orlando hat mir mit den Punkten auf die Sprünge geholfen.
    Gunnar hab ich beherzigt - dritte Spalte war nicht notwendig, unter dem Text hab ich mir mit css Abhilfe geschaffen,
    Wurstwecken mit dem span-Bereich war auch hilfreich.
    Nur Gunnar und padding-right, das hab ich ausprobiert, es hat aber egal was ich gemacht habe nicht funktioniert :-(

    Jetzt bin ich sicher unmständlicher, als ich mir gewünscht habe am Ziel, aber ich bin es,

    Gru? Peter

    1. Hallo,

      Orlando hat mir mit den Punkten auf die Sprünge geholfen.
      Gunnar hab ich beherzigt - dritte Spalte war nicht notwendig, unter dem Text hab ich mir mit css Abhilfe geschaffen,
      Wurstwecken mit dem span-Bereich war auch hilfreich.
      Nur Gunnar und padding-right, das hab ich ausprobiert, es hat aber egal was ich gemacht habe nicht funktioniert :-(

      Funktioniert:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      <html xmlns="http://www.w3.org/1999/xhtml">  
        <head>  
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
          <title>Test</title>  
          <style type="text/css">  
      [code lang=css]      th {  
              width: 5em;  
              text-align: left;  
              background: url(images/dot.gif) bottom repeat-x;  
            }  
            th span {  
              background: white;  
              padding-right: .5em;  
            }
      

      </style>
        </head>
        <body>
          <table>
            <tbody>
              <tr>
                <th><span>foo</span></foo>
                <td>bar</td>
              </tr>
              <tr>
                <th><span>foobar</span></th>
                <td>baz</td>
              </tr>
            </tbody>
          </table>
        </body>
      </html>[/code]

      Jetzt bin ich sicher unmständlicher, als ich mir gewünscht habe am Ziel, aber ich bin es,

      Mein Code ist auch noch umständlciher als ich mir wünsche; das span in th gefällt mir nicht.

      Live long and prosper,
      Gunnar

      --
      „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      1. Hallo.

        <th><span>foo</span></foo>

        [...]

        Mein Code ist auch noch umständlciher als ich mir wünsche; das span in th gefällt mir nicht.

        Mich würde daran etwas anderes sehr viel mehr stören.
        MfG, at

        1. Mich würde daran etwas anderes sehr viel mehr stören.

          at,
          So besser?

          <th><span>bar</span></bar>

          Live long and prosper,
          Gunnar

          --
          „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
          1. Hallo.

            So besser?

            Nein, anders.
            MfG, at