ugrás a tartalomhoz

Dinamikus szélességű táblázat fix oszlopokkal...

vikos · 2010. Nov. 23. (K), 19.53
Sziasztok

Beleütköztem egy problémába. A készülő oldalunk változtatható szélességű (flexi, stech).

A probléma a táblázatokkal van. Az utolsó oszlopba kerültek az adott sorra vonatkozó funkció gombok (egy halom link) így ennek az oszlopnak mindig látszania kell.

Azt szeretném megcsinálni, hogy ahogy növeljük az ablak szélességén úgy jelenjenek meg oszlopok, de nem a jobb szélén hanem egyel beljebb.
És mikor csökkentjük az ablak szélességét akkor csússzanak be az oszlopok a jobb szélső (funkció gombok) alá. mindezt úgy hogy ha már nincs több extra oszlop akkor arányosan növekedjenek az oszlopok szélességei.

Remélem sikerült érhetően leírni a problémát.

A válaszokat és megoldásokat előre is köszönöm!
‹ HTML Select option kiírása JavaScripttel setTimeout() - clearTimeot() / A setTimeout-hoz tartozó azonosító létezik-e? ›
 ■
1

Overflow hidden

Poetro · 2010. Nov. 23. (K), 20.08
Ha fix magasságúak a sorok, akkor viszonylag egyszerű a történet.
Csinálod a táblázatodat, mint eddig, csak épp lehagyod az utolsó funkciós oszlopot belőle, de raksz a szélére egy üres oszlopot, vagy margót, ami olyan széles mint a funkció oszlop. A funkció oszlopot pedig fixen pozicionálod a jobb oldalra.
2

Példa

Poetro · 2010. Nov. 23. (K), 20.32
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div style="position: relative;">
    <table summary="Funkciok" style="width: 200px; position: absolute; right: 0; top: 0">
      <thead>
        <tr>
          <th>Funkciók</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <div style="margin-right: 200px; overflow: hidden">
      <table summary="" style="min-width: 700px; width: 100%">
        <thead>
          <tr style="white-space: nowrap">
            <th>1 szo mint szaz</th>
            <th>2 szo mint szaz</th>
            <th>3 szo mint szaz</th>
            <th>4 szo mint szaz</th>
            <th>5 szo mint szaz</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>