1. 首页
  2. 问答
  3. 是否可以使用CSS垂直显示表格行？

是否可以使用CSS垂直显示表格行？

2017-03-14 104 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

相关问题

 相关问题