chaosgod: tabellenspalte soll rest als eigene breite nehmen

hm ok doofe überschrift wusste aba net wie ichs anders tippen sollt -.- ...

mein problem

habe eine 5 spaltige tabelle. die tabelle ist selbst 98% breit ...

die spaäten aussen sind 10px breit die eins weiter innen 16px und die in der mitte soll halt das nehmen was übrig bleibt ...

wie mache ich das am besten ? entweder ist bei mir die mitte ganz klein oder 'zerdrückt' die spalten aussen :o/

hier mal der code schnüpsäl ;)
  <tr>
    <td style="height:1px;width:10" bgcolor="#D6F5CC"></td>
    <td style="height:1px;width:16" colspan="3" bgcolor="#27B800"></td>
    <td style="height:1px;width:?!?" bgcolor="#D6F5CC"></td>
    <td style="height:1px;width:16" colspan="3" bgcolor="#27B800"></td>
    <td style="height:1px;width:10" bgcolor="#D6F5CC"></td>
  </tr>

  1. Moinsen,

    wie mache ich das am besten ?

    mit DIV-Contaiern. Zumindest wenn Deine Tabelle zu layoutzwecken angelegt ist. Beispiele findest Du ca. in jedem zweiten Thread zum Thema HTML und CSS.

    --
    cu,
    Maz
    1. Hallo.

      mit DIV-Contaiern. Zumindest wenn Deine Tabelle zu layoutzwecken angelegt ist. Beispiele findest Du ca. in jedem zweiten Thread zum Thema HTML und CSS.

      Ja, direkt neben der Anmerkung, dass eine Anhäufung von <div> sicher keine nennenswerte Verbesserung darstellt.
      MfG, at

  2. Hi,

    die spaäten aussen sind 10px breit

    nö, sind sie nicht.

    die eins weiter innen 16px

    auch nicht.

    und die in der mitte soll halt das nehmen was übrig bleibt ...

    dann gebe keine Breite an.

    freundliche Grüße
    Ingo

  3. Hi,

    <td style="height:1px;width:16" colspan="3" bgcolor="#27B800"></td>

    hinter den zahlen bei width fehlen die px. evt. hilft es dir wenn du der
    ganzen tabelle ein width von x verpasst und dann der mittleren spalte
    von 100%. oh, wie ich grad lese hat die tabelle schon ne breite, dann
    gib sie mal noch für die zeile an, hab selbst relativ wenig erfahrung
    und grad keine zeit es selbst auszuprobiern

    MfG

    1. Hallo Daniel,

      hinter den zahlen bei width fehlen die px. evt. hilft es dir wenn du der
      ganzen tabelle ein width von x verpasst und dann der mittleren spalte
      von 100%. oh, wie ich grad lese hat die tabelle schon ne breite, dann
      gib sie mal noch für die zeile an, hab selbst relativ wenig erfahrung
      und grad keine zeit es selbst auszuprobiern

      In alle leeren Tabellenzellen noch ein &nbsp;, der zu streckenden Zelle, wie du sagst, die width:100% und der Tabelle dann noch table-layout:fixed verpassen, dann geht das schon.

      Gruß Gernot

  4. hm erstmal danke...

    ja tabelle is für layout zwecke soll dann aba auch text enthalten

    eure tips haben leider nix gebracht ... im firefox sahs mal kurz ok aus aba in anderen browsern damit nicht .... also für meine zwecke unnützt
    bei div is das problem das das er mir da ne zeilenhöhe gibt die entsprechene zeile muss aba nur 1px hoch sein

    hab mal den kompletten part der tabelle hier ran gehangen .... schaut euch das mal bitte an

    <table cellspacing="1" cellpadding="1" border="0" width="98%" style="table-layout:fixed;">
      <tr>
        <td style="height:10px;" colspan="9"  bgcolor="#27B800"></td>
      </tr>
      <tr>
        <td style="height:7px;" colspan="9"  bgcolor="#D6F5CC"></td>
      </tr>
      <tr>
        <td style="height:1px;width:10px;" bgcolor="#D6F5CC"></td>
        <td style="height:1px;width:16px;" colspan="3" bgcolor="#27B800"></td>
        <td style="height:1px;" bgcolor="#D6F5CC"><span style="width:100%;"></span></td>
        <td style="height:1px;width:16px;" colspan="3" bgcolor="#27B800"></td>
        <td style="height:1px;width:10px;" bgcolor="#D6F5CC"></td>
      </tr>
    ...
    </table>

    1. Hallo chaosgod,

      <table cellspacing="1" cellpadding="1" border="0" width="98%" style="table-layout:fixed;">

      Die width würde ich auch per CSS definieren und wie gesagt, leere Tabellenzellen solltest du auch nicht haben, tu da mal jeweils mindestens ein &nbsp; mit font-size:3px rein!

      Gruß Gernot

      1. Hallo chaosgod,

        <table cellspacing="1" cellpadding="1" border="0" width="98%" style="table-layout:fixed;">

        Die width würde ich auch per CSS definieren und wie gesagt, leere Tabellenzellen solltest du auch nicht haben, tu da mal jeweils mindestens ein &nbsp; mit font-size:3px rein!

        Gruß Gernot

        hm geht leider immernoch net so richtig ... im firefox siehts schonhalbwegs gut aus nur das dank dem &nbsp; die zeilen die 1x1 px haben sollen zu gross sind :o/

        aber im IE siehts immanoch schei.... aus -.-

        soll dieses style umbauen weil vorher blind gifs benutzt wurden und die wech sollen ... da funktz das aba alles ohne probleme

        -> http://health-network.de/dienstsuche/3/3/ da mitte die überschrift ... wo dienstleistersuche steht ... das is das orginal so solls wieda aussehn

        1. Hallo chaosgod,

          hm geht leider immernoch net so richtig ... im firefox siehts schonhalbwegs gut aus nur das dank dem &nbsp; die zeilen die 1x1 px haben sollen zu gross sind :o/

          Meines wissens muss man nur mit Rücksicht auf Firefox font-size auf ein Minimunm von 3px stellen, andere Browser können auch kleinere Schriftgrößen für &nbsp interpretieren.

          -> http://health-network.de/dienstsuche/3/3/ da mitte die überschrift ... wo dienstleistersuche steht ... das is das orginal so solls wieda aussehn

          Wenn du so kleine grüne Ecken haben möchtest, warum arbeitest du denn da nicht mit border und sparst dir ein paar Nachbarzellen?

          Gruß Gernot

          1. Hallo chaosgod,

            Meines wissens muss man nur mit Rücksicht auf Firefox font-size auf ein Minimunm von 3px stellen, andere Browser können auch kleinere Schriftgrößen für &nbsp interpretieren.

            egal was ich da den für ne px zahl nehme er macht mir die 1px zeilen/spalten zu gross

            Wenn du so kleine grüne Ecken haben möchtest, warum arbeitest du denn da nicht mit border und sparst dir ein paar Nachbarzellen?

            ja um diese ecken gehtz ... meine cheffin will die unbedingt haben -.-
            und auch wenn ichs mit border mache bleibt immernoch das problem das sozusagen die mittelste spalte nicht die 'rest' grösse hat

            1. Hallo chaosgod,

              ja um diese ecken gehtz ... meine cheffin will die unbedingt haben -.-
              und auch wenn ichs mit border mache bleibt immernoch das problem das sozusagen die mittelste spalte nicht die 'rest' grösse hat

              Ich halte das durchaus für machbar, aber wenn deine Chefin sich das mal durchrechnen würde, was diese dämlichen blindpixelfreien Ecken an Arbeitszeit kosten, käme sie wahrscheinlich zu dem Ergebnis, dass der Aufwand in keinem vernünftigen Verhältnis zum Nutzen steht.

              Gruß Gernot

              1. Hallo nochmal,

                ja um diese ecken gehtz ... meine cheffin will die unbedingt haben -.-
                und auch wenn ichs mit border mache bleibt immernoch das problem das sozusagen die mittelste spalte nicht die 'rest' grösse hat

                Ich halte das durchaus für machbar, aber wenn deine Chefin sich das mal durchrechnen würde, was diese dämlichen blindpixelfreien Ecken an Arbeitszeit kosten, käme sie wahrscheinlich zu dem Ergebnis, dass der Aufwand in keinem vernünftigen Verhältnis zum Nutzen steht.

                  
                was ist hier mit dem Syntax-Highlighting los?  
                <html>  
                <head>  
                <title>Grüne Ecken</title>  
                <meta name="author" content="Gernot Back">  
                <meta name="generator" content="Ulli Meybohms HTML EDITOR">  
                </head>  
                <body>  
                <table cellspacing="0" cellpadding="0" style="[code lang=css]width:100%;background:#D6F5CC;border-top:solid 5px #27B800;table-layout:fixed" border="0">  
                <tr>  
                 <td rowspan="4" style="[code lang=css]width:10px;font-size:6px
                ~~~">&nbsp;</td>  
                 <td colspan="2" style="`width:16px;border-bottom:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                 <td style="`font-size:6px;`{:.language-css}">&nbsp;</td>  
                 <td colspan="2" style="`width:16px;border-bottom:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                 <td rowspan="4" style="`width:10px;font-size:6px`{:.language-css}">&nbsp;</td>  
                </tr>  
                <tr>  
                 <td rowspan="2" style="`width:3px;border-left:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                 <td colspan="3" style="`font-size:3px;height:3px`{:.language-css}">&nbsp;</td>  
                 <td rowspan="2" style="`width:3px;border-right:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                </tr>  
                <tr>  
                 <td colspan="3" rowspan="2" style="`height:16px;vertical-align:bottom;background:#27B800;padding:10px 10px 4px 4px;color:white;font-weight:bold;text-align:right;font-size:12px;letter-spacing:.1em;font-family:Verdana`{:.language-css}">Dienstleistersuche</td>  
                </tr>  
                <tr>  
                 <td style="`font-size:16px;_font-size:3px;`{:.language-css}">&nbsp;</td>  
                 <td style="`font-size:16px;_font-size:3px`{:.language-css}">&nbsp;</td>  
                </tr>  
                </table>  
                </body>  
                </html>[/code]  
                  
                Gruß Gernot
                
                1. hi,

                  was ist hier mit dem Syntax-Highlighting los?

                  das hat bemerkt, dass der kleine Gernot seinen teller nicht leergegessen, und außerdem den ~~~ -tag für das CSS beim ersten auftauchen der tabelle nicht wieder geschlossen hat.

                  sobald er brav beides nachholt, sieht's so aus:

                  [code lang=html]

                  <html>
                  <head>
                  <title>Grüne Ecken</title>
                  <meta name="author" content="Gernot Back">
                  <meta name="generator" content="Ulli Meybohms HTML EDITOR">
                  </head>
                  <body>
                  <table cellspacing="0" cellpadding="0" style="[code lang=css]width:100%;background:#D6F5CC;border-top:solid 5px #27B800;table-layout:fixed

                  
                  > <tr>  
                  >  <td rowspan="4" style="`width:10px;font-size:6px`{:.language-css}">&nbsp;</td>  
                  >  <td colspan="2" style="`width:16px;border-bottom:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                  >  <td style="`font-size:6px;`{:.language-css}">&nbsp;</td>  
                  >  <td colspan="2" style="`width:16px;border-bottom:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                  >  <td rowspan="4" style="`width:10px;font-size:6px`{:.language-css}">&nbsp;</td>  
                  > </tr>  
                  > <tr>  
                  >  <td rowspan="2" style="`width:3px;border-left:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                  >  <td colspan="3" style="`font-size:3px;height:3px`{:.language-css}">&nbsp;</td>  
                  >  <td rowspan="2" style="`width:3px;border-right:solid 1px #27B800;font-size:6px`{:.language-css}">&nbsp;</td>  
                  > </tr>  
                  > <tr>  
                  >  <td colspan="3" rowspan="2" style="`height:16px;vertical-align:bottom;background:#27B800;padding:10px 10px 4px 4px;color:white;font-weight:bold;text-align:right;font-size:12px;letter-spacing:.1em;font-family:Verdana`{:.language-css}">Dienstleistersuche</td>  
                  > </tr>  
                  > <tr>  
                  >  <td style="`font-size:16px;_font-size:3px;`{:.language-css}">&nbsp;</td>  
                  >  <td style="`font-size:16px;_font-size:3px`{:.language-css}">&nbsp;</td>  
                  > </tr>  
                  > </table>  
                  > </body>  
                  > </html>[/code]  
                    
                  gruß,  
                  wahsaga  
                    
                  
                  -- 
                  /voodoo.css:  
                  #GeorgeWBush { position:absolute; bottom:-6ft; }
                  
                  1. Hi,

                    sobald er brav beides nachholt, sieht's so aus:

                    warst Du eigentlich für diese Verschachtelung verantwortlich?

                    <code title="html" class="html"><span class="q">»»

                    freundliche Grüße
                    Ingo

                    1. Hallo Ingo,

                      warst Du eigentlich für diese Verschachtelung verantwortlich?

                      <code title="html" class="html"><span class="q">»»

                      Ich lehne jedenfalls jede Verantwortung ab, zumindest solange mich niemand danach fragt!

                      Gruß Gernot

                      1. also erstmal extrem dickes danke @gernot

                        kolege hatte es zwar auch irgendwann hinbekommen aba seine version is 4 mal so gross wie deine ;)

                        1. Hallo chaosgod,

                          kolege hatte es zwar auch irgendwann hinbekommen aba seine version is 4 mal so gross wie deine ;)

                          ... wobei man meine Lösung natürlich auch noch weiter verschlanken kann und auch sollte, indem man statt mit Inlinestyles mit ordentlichen Klassen arbeitet. Das habe ich hier nur des schnelleren Überblicks wegen gemacht.

                          Gruß Gernot

                      2. Hallo.

                        warst Du eigentlich für diese Verschachtelung verantwortlich?

                        [...]

                        Ich lehne jedenfalls jede Verantwortung ab, zumindest solange mich niemand danach fragt!

                        Hm, aber genau das ist doch geschehen.
                        MfG, at

                2. Hi,

                  [ code lang=html]
                  was ist hier mit dem Syntax-Highlighting los?
                  [...]
                  <table cellspacing="0" cellpadding="0" style="[ code lang=css]width:100%;background:#D6F5CC;border-top:solid 5px #27B800;table-layout:fixed" border="0">
                  <tr>
                  [...]
                  </html>[ /code]

                  Ich bin schon lange dafür, daß das Forum CSS in einem Code-Block selbst erkennt. ;-)

                  freundliche Grüße
                  Ingo

        2. hi,

          soll dieses style umbauen weil vorher blind gifs benutzt wurden und die wech sollen ...

          und deshalb willst du diese jetzt durch 1x1 pixel große, leere tabellenzellen ersetzen?

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. hi,

            soll dieses style umbauen weil vorher blind gifs benutzt wurden und die wech sollen ...

            und deshalb willst du diese jetzt durch 1x1 pixel große, leere tabellenzellen ersetzen?

            gruß,
            wahsaga

            hm ... ja .... bei bildern kann (warum auch immer) mal vorkommen das er sie nicht anzeigt und dann da ein kein bild da feld ist ... zB wenn man bilder im browser abstellt ... sieht doof aus

    2. Hallo chaosgod,

      <td style="height:1px;" bgcolor="#D6F5CC"><span style="width:100%;"></span></td>

      Das Span-Element brauchst du auch nicht, die width:100% willst du deiner Tabellenzelle geben; was bringt es dir, wenn ein Kindelement in der Weite 100% von einem Eleternelement einnimmt, dessen Weite seinerseits nicht klar definiert ist?

      Gruß Gernot

    3. Moinsen,

      bei div is das problem das das er mir da ne zeilenhöhe gibt die entsprechene zeile muss aba nur 1px hoch sein

      dann definiere im CSS doch die gewünschte line-height für das gewünschte Element.

      <td style="height:1px;" bgcolor="#D6F5CC"><span style="width:100%;"></span></td>

      Wenn das <span> ein Versuch ist, die Tabellenzelle zu "aufzudehnen", wird das nix. Die 100% beziehen sich immer auf die Breite des Elternelements.

      --
      cu,
      Maz