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

时间：2017-03-14 12:25:20

标签： html css html-table vertical-alignment

我有一张这样的表：

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

嗯，这张桌子很宽。现在我必须制作一个样式表，使网站适合在狭窄的屏幕上观看，如手机。所以我必须做这个宽大的桌子。

我在想这张桌子是否可以垂直显示，而不是水平显示。更具体地说，我在考虑是否可以显示更多这样的内容：

<ul>
  <li><strong>John Doe:</strong>
    <ul>
      <li><em>Phone no.:</em> 00123456789</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样式表，当从第一个代码段附加到表代码时会使它看起来像第二个代码段？

6 个答案:

答案 0 :(得分：5)

当然，您可以使用media queries进行游戏并更改display的{​​{1}}：

See this fiddle 

table

答案 1 :(得分：4)

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>

这是一种没有<thead>元素的可能方法，但您可以在每个人之前创建隐藏元素，例如<span class="hidden">Name:</span> Cpt. Kirk然后使用媒体查询启用所有隐藏元素。不是最优雅的解决方案，我可能更喜欢JS。

答案 2 :(得分：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/

答案 3 :(得分：0)

您可以将表格元素更改为显示块并强制它们像块元素一样，只需将此类添加到表格中即可。

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

＆＃13;
＆＃13; 
.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：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; } 
}

我会工作。

答案 5 :(得分：-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); }
}

希望这有帮助！

相关问题
最新问题