1. 首頁
  2. 問答
  3. 是否可以使用CSS垂直顯示錶格行？

是否可以使用CSS垂直顯示錶格行？

2017-03-14 108 views
0

我有一個表是這樣的：是否可以使用CSS垂直顯示錶格行？

<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>0</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>

那麼，這個表是相當廣泛。現在我必須製作一個樣式表，以使網站適合在窄屏幕上查看，如手機。所以我必須對這張寬桌子做些什麼。

我在想如果這個表可以垂直顯示，而不是水平顯示。更具體地講，我在想，如果它可以顯示更多類似這樣的：

<ul> 
 
    <li><strong>John Doe:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 0</li> 
 
     <li><em>Address:</em> Morgue St. 21</li> 
 
     <li><em>Wealth:</em> $100,000</li> 
 
    </ul> 
 
    </li><li><strong>Mary Sue:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 00987654321</li> 
 
     <li><em>Address:</em> Impossible St. 12</li> 
 
     <li><em>Wealth:</em> $999,999,999,999,999</li> 
 
    </ul> 
 
    </li><li><strong>Cpt. Kirk:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 00999999999</li> 
 
     <li><em>Address:</em> Enterprise St. 22</li> 
 
     <li><em>Wealth:</em> $100,000,000 </li> 
 
    </ul> 
 
    </li> 
 
</ul>

現在，我一定能做出一個JavaScript會從第一個片段從變換表的代碼列表代碼第二個片段。但我想知道，如果這是必要的？是否有可能創建一個CSS樣式表，當它連接到第一個代碼片段的表格代碼時，會使它看起來像第二個代碼片段？

來源

2017-03-14 gaazkam

回答

1

可能有更好的方式來做到這一點，但這裏是達到這一目標的解決方案：

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:"◊ "; 
}

查找工作示例：https://jsfiddle.net/ktnurvfr/

來源

2017-03-14 12:41:17 zuluk

4

當然，你可以用media queries玩和改變在table的display：

See this fiddle

@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; } 
}

來源

2017-03-14 12:45:05

+0

不錯，但爲什麼我的瀏覽器（IE11）中沒有顯示列表式項目？ – zuluk

+0

我一直太快，現在編輯感謝:) –

1 

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>0</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>

這裏沒有<thead>元素的可能方式，但你可以每個人，例如之前創建的隱藏要素<span class="hidden">Name:</span> Cpt. Kirk，然後通過媒體查詢啓用所有隱藏元素。不是最優雅的解決方案，我可能更喜歡JS。

來源

2017-03-14 12:45:33

0

您可以將表格元素更改爲顯示塊，並強制它們像塊元素一樣操作，只需將此類添加到表格中即可。

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


.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>0</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>

來源

2017-03-14 12:50:23

-1

我有同樣的問題。在我的搜索過程中，我通過sergiopinnaprato遇到了這個優雅的解決方案：http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

在較小的屏幕上，它將表格更改爲單列。非常可讀僅使用HTML和CSS代碼解決方案：

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); } 
}

希望這有助於！

來源

2017-03-14 12:50:59 Fudgy

+0

雖然這可能在理論上回答這個問題，[這將是更可取的]（/ meta.stackoverflow.com/q/8259）包括答案的基本部分這裏，並提供鏈接供參考。 –

+0

我從原始來源添加了一些示例代碼，以澄清由外部鏈接提供的解決方案。 – Fudgy

0

您可以使用此代碼：

@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; } 
}

我會的工作。

來源

2017-03-14 14:35:28 snip1377

相關問題

 相關問題