Stol satrlarini CSS bilan vertikal ravishda ko'rsatish mumkinmi?

Menda bunday jadval bor:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>
</div> </div>

Xo'sh, bu stol juda keng. Va hozir men saytni mobil telefon kabi tor ekranda tomosha qilishga moslashtiradigan uslublar jadvalini yaratish kerak. Shuning uchun men bu keng stol bilan sth qilishim kerak.

Ushbu stol gorizontal emas, vertikal ko'rinishi mumkinmi deb o'ylardim. Keyinchalik aniqrog'i men bu haqda yanada ko'proq ma'lumot bera oladimi deb o'ylardim:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">


  • John Doe:
    • Phone no.: 00123456789
    • Address: Morgue St. 21
    • Wealth: $100,000
  • Mary Sue:
    • Phone no.: 00987654321
    • Address: Impossible St. 12
    • Wealth: $999,999,999,999,999
  • Cpt. Kirk:
    • Phone no.: 00999999999
    • Address: Enterprise St. 22
    • Wealth: $100,000,000
</div> </div>

Endi, jadval kodini birinchi parchadan ikkinchi parchadan ro'yxat kodiga aylantiradigan Javascriptni yaratishim mumkin. Lekin, bu kerakmi? CSS uslublar jadvalini tuzish mumkinmi, agar birinchi parchadan jadval kodiga qo'shilsa, u ikkinchi parchaga o'xshab qoladi?

0

6 javoblar

Albatta, siz media-so'rovlar bilan o'ynashingiz va jadvali ning ko'rsatkichi ni o'zgartirishingiz mumkin:

Ushbu fredni ko'rib chiqing

@media(max-width: 640px){
  table, table td, table tr, table th { display: block; text-align: left; } 
  table th, table td { margin: 0; padding-left: 25px;  }
  table td  { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
  table thead { display: none; }
}
5
qo'shib qo'ydi
Men juda tez ketdim, endi tahrir qilingan :)
qo'shib qo'ydi muallif Vincent G, manba
Yaxshi, lekin nima uchun brauzerda ko'rsatilmagan (IE11) list uslubidagi narsalar?
qo'shib qo'ydi muallif zuluk, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

td, th {
  text-align: left;
  display: block;
  float: left;
  width: 100%;
}

thead {
  display: none;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>
</div> </div>

Here's a possible way without the <thead> elements, but you could create hidden elements before each person, e.g. Cpt. Kirk and then enable all the hidden elements with media queries. Not the most elegant solution, I'd probably prefer JS for this.

3
qo'shib qo'ydi
Ishlar ajoyib! Rahmat
qo'shib qo'ydi muallif aziz, manba

Buning eng yaxshi usullari bo'lishi mumkin, ammo bu erda maqsadga erishish uchun yechim bor:

table thead{
  display:none;
}    
table tbody tr th{
  display:block;
  text-align: left;
}
table tbody tr td{
 display:block;
 margin-left:20px;
}
table tbody tr th::before{
 content:"• ";
}
table tbody tr td::before{
 content:"◊ ";
}

Find a working example: https://jsfiddle.net/ktnurvfr/

1
qo'shib qo'ydi

I had the same problem. During my search I encountered this elegant solution by sergiopinnaprato: http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

Kichik ekranlarda jadvalni bitta ustunga o'zgartiradi. HTML va CSS kodini ishlatib, juda oson o'qiladi echim:

HTML:

<div id="no-more-tables">
        <table class="col-md-12 table-bordered table-striped table-condensed cf">
            <thead class="cf">
                <tr>
                    <th>Code</th>
                    <th>Company</th>
                    <th class="numeric">Price</th>
                    <th class="numeric">Change</th>
                    <th class="numeric">Change %</th>
                    <th class="numeric">Open</th>
                    <th class="numeric">High</th>
                    <th class="numeric">Low</th>
                    <th class="numeric">Volume</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-title="Code">AAC</td>
                    <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                    <td data-title="Price" class="numeric">$1.38</td>
                    <td data-title="Change" class="numeric">-0.01</td>
                    <td data-title="Change %" class="numeric">-0.36%</td>
                    <td data-title="Open" class="numeric">$1.39</td>
                    <td data-title="High" class="numeric">$1.39</td>
                    <td data-title="Low" class="numeric">$1.38</td>
                    <td data-title="Volume" class="numeric">9,395</td>
                </tr>
                <tr>
                    <td data-title="Code">AAD</td>
                    <td data-title="Company">ARDENT LEISURE GROUP</td>
                    <td data-title="Price" class="numeric">$1.15</td>
                    <td data-title="Change" class="numeric">+0.02</td>
                    <td data-title="Change %" class="numeric">1.32%</td>
                    <td data-title="Open" class="numeric">$1.14</td>
                    <td data-title="High" class="numeric">$1.15</td>
                    <td data-title="Low" class="numeric">$1.13</td>
                    <td data-title="Volume" class="numeric">56,431</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS:

@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#no-more-tables table, 
#no-more-tables thead, 
#no-more-tables tbody, 
#no-more-tables th, 
#no-more-tables td, 
#no-more-tables tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

#no-more-tables tr { border: 1px solid #ccc; }

#no-more-tables td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
    white-space: normal;
    text-align:left;
}

#no-more-tables td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
}

/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}

Umid qilamanki bu yordam!

1
qo'shib qo'ydi
Bu savolga nazariy jihatdan javob bersa ham, javobning muhim qismlarini bu erda qo'shish uchun afzal bo'lar edi va havolani havola qilish uchun .
qo'shib qo'ydi muallif Daniel A. White, manba
Tashqi havola orqali taqdim etilgan echimni aniqlash uchun asl manbadan ba'zi bir namuna kodini qo'shdim.
qo'shib qo'ydi muallif Fudgy, manba

Blokni aks ettirish uchun jadval elementlarini o'zgartirishingiz mumkin va blok elementlari kabi harakat qilishni majbur qilish uchun faqat ushbu klassni jadvalga qo'shishingiz mumkin.

.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
<table class="vertical-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone no.</th>
      <th>Address</th>
      <th>Wealth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John Doe</th>
      <td>00123456789</td>
      <td>Morgue St. 21</td>
      <td>$100,000</td>
    </tr><tr>
      <th>Mary Sue</th>
      <td>00987654321</td>
      <td>Impossible St. 12</td>
      <td>$999,999,999,999,999</td>
    </tr><tr>
      <th>Cpt. Kirk</th>
      <td>00999999999</td>
      <td>Enterprise St. 22</td>
      <td>$100,000,000</td>
    </tr>
  </tbody>
</table>
</div> </div>
0
qo'shib qo'ydi

ushbu kodni ishlatishingiz mumkin:

@media(max-width: 640px){
table, table td, table tr, table th { display: block; text-align: left; } 
table th, table td { margin: 0; padding-left: 25px;  }
table td  { margin-left: 40px;list-style: square; display: list-item;   padding-left: 0; }
table thead { display: none; } 
}

men ishlayman.

0
qo'shib qo'ydi