SORU
21 AĞUSTOS 2009, Cuma


nasıl sol sütun ve kaydırılan vücut sabit/donmuş bir HTML tablo oluşturmak mı?

Nasıl sol sütun ve kaydırılan vücut sabit/donmuş bir HTML tablo oluşturmak mı?

Basit bir çözüm istiyorum. Diğer bazı sorular benzer gibi bir şey biliyorum:

Ama donmuş olması için sadece tek bir sol sütun ihtiyacım var ve basit ve daha az komut bir çözümü tercih ederim.

CEVAP
21 AĞUSTOS 2009, Cuma


Eğer sadece kolonlar yatay kaydırma bir tablo istiyorsanız, 1 ** ilk sütun, ve overflow-x: scroll bir blok içinde tüm tablo sarın. IE 7, ancak bu çalışırken rahatsız etmeyin...

Demo: http://jsfiddle.net/emn13/YMvk9/

İlgili HTML & CSS:

<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
    body { font:16px Calibri;}
    table { border-collapse:separate; border-top: 3px solid grey; }
    td {
        margin:0;
        border:3px solid grey;
        border-top-width:0px;
        white-space:nowrap;
    }
    div {
        width: 600px;
        overflow-x:scroll;  
        margin-left:5em;
        overflow-y:visible;
        padding-bottom:1px;
    }
    .headcol {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-right: 0px none black;
        border-top-width:3px; /*only relevant for first row*/
        margin-top:-3px; /*compensate for top border*/
    }
    .headcol:before {content: 'Row ';}
    .long { background:yellow; letter-spacing:1em; }
</style></head><body>
<div><table>
    <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>
</body></html>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Friday Night Cranks

    Friday Night

    27 Mayıs 2007
  • J Medema

    J Medema

    11 EKİM 2006
  • Leigh Momii

    Leigh Momii

    10 Mayıs 2006