Question

我试图让这些表格单元格在窗口太小而无法全部显示时包裹到下一行，但是当我调整大小时，我无法让它们破坏线条。知道怎么做吗？

<TD>
  <DIV id="mytabs">
    <TABLE height=10 cellSpacing=0 cellPadding=0 bgColor=#ffffff border=0>
      <TBODY>
        <TR>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;blocks1blocks1</SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;tab1</SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;LongNoNameNoBreakTabThree</SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;tab3letters</SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;tab4 </SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;long tab 5</SPAN></A></TD>
    	  <TD class="whitetabs tabBorder" noWrap><A style="CURSOR: hand"><SPAN>&nbsp;&nbsp;tab6
    	  <TD>
    	    <SELECT align=center> 
    		  <OPTION>&gt;&gt;Select a tab</OPTION> 
    		</SELECT>
    	  </TD>
    	</TR>
      </TBODY>
    </TABLE>
  </DIV>
</TD>

https://jsfiddle.net/8jzc5exd/

Answer 1

不幸的是，表行不能自己包装，但你可以做的是使用css将内容包装在表格单元格中，如下所示：

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

如果您愿意使用库，您还可以查看Bootstrap的响应表结构。它基本上可以帮助您调整表格单元格以适应屏幕。请在此处阅读：https://v4-alpha.getbootstrap.com/content/tables/#responsive-tables

HTH

Answer 2

使用媒体查询完全更改表格布局。

你的小提琴：https://jsfiddle.net/abhitalks/3jqp7rtt/

尝试将结果窗格调整为较小的宽度，然后返回以查看表格如何拆分单元格。

<强>段：

＆＃13;

table { border: 1px solid #aaa; border-collapse: collapse; }
td { border: 1px solid #aaa; padding: 4px; }

@media (max-width: 800px) {
  tr {display: block; }
  td {display: inline-block; word-break: break-all; }
}

＆＃13;

<DIV id=tabs>
  <TABLE>
    <TBODY>
      <TR>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;blocks1blocks1</SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;tab1</SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;LongNoNameNoBreakTabThree</SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;tab3letters</SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;tab4 </SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;long tab 5</SPAN></A></TD>
        <TD class="whitetabs tabBorder" noWrap><A><SPAN>&nbsp;&nbsp;tab6</SPAN></A></TD>
        <TD>
          <SELECT align=center> 
            <OPTION>&gt;&gt;Select a tab</OPTION> 
          </SELECT>
        </TD>
      </TR>
    </TBODY>
  </TABLE>
</DIV>

＆＃13;

警告：虽然它似乎适用于单行表，但多行和colspans以及嵌套表结构将会分崩离析！当然语义也被屠杀了。你已被警告过了。

当窗口很小时，如何将表行换行到下一行

2 个答案: