需要设计水平表

Question

我需要设计具有n行数的动态数据的表

顶部表格标题的正常格式和底部的行...我需要左边的标题和右边的行，如下所示

目前我的表格如下所示

我想将其设计如下

[！[

<table style="border:1px solid; text-align:center;">
  <thead>
      <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    </thead>
  <tbody>
    <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
      </tr>
    <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
      </tr>
    <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
      </tr>
    </tbody>
  
  <table>

] 2] 2

Answer 1

这应该对你有帮助。

＆＃13;

＆＃13;

function swap( cells, x, y ){
   if( x != y ){     
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('tbody').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}

＆＃13;

thead {
  float: left;   
}


thead th {
  display: block;   
}

tbody {
  float: right;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <thead>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
    </tbody>
   
  <table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用td并设置标题部分的样式。

static_cast<B*>(IntrusivePtr<A>.get())