Question

假设我有一个<table> <tr> <td> <div id="content1"></div> </td> <td> <div id="content2"></div> </td> <td> <div id="content3"></div> </td> </tr> <tr> <td> <div id="content4"></div> </td> <td> <div id="content5"></div> </td> <td> <div id="content6"></div> </td> </tr> </table> HMTL表：

width > height

当屏幕处于横向模式时（即 - height > width）

，此功能正常

假设2x3，有没有办法动态将表格更改为以下<table> <tr> <td> <div id="content1"></div> </td> <td> <div id="content2"></div> </td> </tr> <tr> <td> <div id="content3"></div> </td> <td> <div id="content4"></div> </td> </tr> <tr> <td> <div id="content5"></div> </td> <td> <div id="content6"></div> </td> </tr> </table>表：

Xml

Answer 1

是的，有可能以动态方式查看表格，即此技术称为响应式UI，您可以为每个td元素指定宽度百分比，但我不会推荐它。

我建议你停止使用表，表很难维护，而是使用div，span，ul，li和css magic来创建表结构并使用bootstrap来响应用户界面。

您可以在此处详细了解：http://getbootstrap.com/getting-started/

希望这会有所帮助。：）

Answer 2

<table>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>

table {
 display:flex;
 flex-wrap:wrap;
 width:90%;
 margin:0 auto;
}

tr {
 flex:1 0 300px;
 display:inline;
}

td {
 display:inline-block;
 width:100px;
 height:100px;
}

https://jsfiddle.net/cmckay/02tvkyj8/

http://autoprefixer.github.io/

Answer 3

这是jQuery的一种解决方案，我先获取所有td，然后介绍一下tr，然后将其附加到正文末尾。

然后根据宽度显示none或table。

演示

var tbodyTr = $('table td');
var i = 0;

/** Create new lines for height > width **/
tbodyTr.each(function(){

  /* Appending a tr every 2 td */
  if(i%2 == 0){
    $('tbody > tr:last').after('<tr class="wShorterH"></tr>');
  }
  $('tbody > tr:last').append('<td></td>');

  $('tbody > tr:last > td:last').append($(this).html());

  i++;
});

/* Trigger 1st change, maybe the window already below 500 */
WidthChange();

/* when window on resize */
$(window).resize(function(){
    WidthChange();
});

function WidthChange() {
  if($(window).height() > $(window).width()){
    $('tr').each(function(){
      if($(this).hasClass('wShorterH')){
        $(this).addClass('d-table');
        $(this).removeClass('d-none');
      }else{
        $(this).addClass('d-none');
        $(this).removeClass('d-table');
      }
    });
  }else{
    $('tr').each(function(){
      if($(this).hasClass('wShorterH')){
        $(this).removeClass('d-table');
        $(this).addClass('d-none');
      }else{
        $(this).addClass('d-table');
        $(this).removeClass('d-none');
      }
    });
  }
}

.d-table{
  display: table;
}
.d-none{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td> <div id="content1">1</div> </td>
      <td> <div id="content2">2</div> </td>
      <td> <div id="content3">3</div> </td>
    </tr>
    <tr>
      <td> <div id="content4">4</div> </td>
      <td> <div id="content5">5</div> </td>
      <td> <div id="content6">6</div> </td>
    </tr>
  </tbody>
</table>

根据屏幕尺寸更改HTML表格结构

3 个答案:

演示