表格单元格推到下一行

Question

我正在创建一个包含完整CodePen example

的简报模板

我有几个Table行如下：

<tr>
  <td class="snip" valign="top">
    <table class="snip" style="padding-left: 8px;">
      <tr>
        <td>
          <img src="http://placehold.it/40x32" style="padding: 4px">
        </td>
      </tr>
      <tr>
        <td>
          THIS IS THE TITLE 1
        </td>
       </tr>
      <tr>
       <td>
         <span>THIS IS THE LINK 1 FOR TITLE 1</span>
         <br>
         <span>THIS IS THE LINK 2 FOR TITLE 1</span>
         <br>
         <span>YET ANOTHER LINK FOR TITLE 1</span>
         <br>
         <span>ONE MORE LINK FOR TITLE 1</span>
         <br>
         <span>AND THE LAST LINK FOR TITLE 1</span>
       </td>
     </tr>
   </table>
  </td>
</tr>

不知何故，当我将浏览器调整到特定宽度时，我得到：

你可以看到最后一个TD进入下一行......

我该如何解决这个问题？我无法找到解决方案......

Answer 1

看看这个，我用类

设置了两个不同的tr

http://codepen.io/anon/pen/iyEmK

@media only screen and (max-width : 600px) {
      tr.myTR {float:none;display:block;clear:both} }

Answer 2

使用min-width代替width

table[class="snip"] {    
    min-width: 50% !important;    
}

http://codepen.io/anon/pen/dzGKo

Answer 3

您可以添加

td[class="snip"]:nth-child(2n+1) {
    clear: left;
}

这样窄屏幕就有两行元素。

http://codepen.io/gpetrioli/pen/lbxEe

演示