Question

是否可以垂直填充表格？我的意思是这样的

而不是像这样填充

Column1 Column2 Column3 Column4 Column5 Column6 

data1-1 data1-2 data1-3 data1-4 data1-5 data1-6 


data2-1 data2-2 data2-3 data2-4 data2-5 data2-6

Column1     Column2   Column3   Column4   Column5   Column6 
data1-1     data2-1
data1-2     data2-2
data1-3     data2-3
data1-4     data2-4
data1-5     data2-5
data1-6     data2-6

Answer 1

尝试使用此CSS技巧来显示列而不是<tr>

的行

tr { 
  display: block; 
  float: left; 
}

th, td { 
  display: block; 
}

Answer 2

你当然可以按照上面提到的方式使用html表格。这只是您希望如何表示数据的问题。在上面的示例中，您有2行和6列，而在另一行中有2列和6行。试试这个插件： http://plnkr.co/edit/u0aBeB3ABvR7m35hBLHk?p=preview

它有2个表格，显示如何适应两种形式的数据。希望它能帮到你。这是HTML代码：

第一张表

<table>
  <thead>Table display
  </thead>
  <tbody>
    <tr>
      <td>Firstname</td>
      <td>Mike</td>
      <td>Hally</td>
      <td>Jack</td>
      <td>Mona</td>
    </tr>
    <tr>
      <td>Lastname</td>
      <td>Evans</td>
      <td>Ema</td>
      <td>Wang</td>
      <td>Lizzie</td>
    </tr>
  </tbody>
</table>

<p>Second Table</p>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td>Mike</td>
    <td>Evans</td> 
  </tr>
  <tr>
    <td>Hally</td>
    <td>Ema</td> 
  </tr>
  <tr>
    <td>Jack</td>
    <td>Wang</td> 
  </tr>
  <tr>
    <td>Mona</td>
    <td>Lizzie</td> 
  </tr>

垂直引导填充表

2 个答案: