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

  • Fubar Protocol

    Fubar Protoc

    21 AĞUSTOS 2010
  • rtisticsdev

    rtisticsdev

    31 Mayıs 2012
  • WHZGUD2

    WHZGUD2

    21 EYLÜL 2011