Question

嘿程序员，我有这个表代码，我正在使用twitter bootstrap。我希望当在小屏幕上查看表格时，前两个td仍然是内联的而第三个td进入下一行;即

<my photo> <myname>   //the 1st td contains my photo,the second one my name and the 
<my description>      //the 3rd td contains my description but it's on the next line.

这是我的示例表：

<table>
<tr><td>photo</td><td>name</td><td class="mylast">mydescription</td></tr>
</table>

这是我的样本css：

@media(max-width:767px)
{
 td.mylast{display:block;}
}

我尝试了很多方法，但没办法，我必须寻求帮助。请协助。

Answer 1

您可以按照以下方式执行此操作。但是，我不建议您更改表的工作方式。您可以使用网格来执行相同的操作。

   table{
    display:block;
    float:left;
    clear:both;
   }

   tr,td{
    display: block;

    }

   td{
     width: 50%;
     float: left;
    }

   td.myLast{
     width:100%;
     float:left;
     clear:both
    }

Answer 2

您可以使用此

<table class="table">
<tbody>
<tr>
<td>Photo</td>
<td>Name</td>
</tr>
<tr>
<td colspan="2">Description</td>
</tr>
</tbody>
</table>

Answer 3

@ Neil，感谢您的帮助，但由于我有很多td，我虽然会篡改其他区域的总体布局。现在我这么想。我创建隐藏在大型浏览器中的另一行，但在小型浏览器上显示。这是样本：

<table>
<tr><td>photo</td><td>name</td><td class="mylast">mydescription</td></tr>
<tr style="display:none;"><td colspan="3" class="medsmall">mydescription</td></tr>
</table>

和我的风格：

@media(max-width:767px)
{
 td.mylast{display:none;}
 tr.medsmall{display:block;}
}

我不知道你的看法，但如果你不介意我还需要一点点澄清：tr不会在媒体上小显示（在调整大小的浏览器上），我认为我需要替换一些东西代替 tr.medsmall {display：block} ，因为这有点告诉tr在块中显示但不显示;

使td显示为块元素

3 个答案: