0

我有一个响应表。我唯一的问题是如何控制单元格的宽度和高度，因为在移动视图中单元格被合并

这是我的小提琴

http://jsfiddle.net/cancerian73/PCtQj/embedded/result/

尝试将浏览器窗口缩小到移动视图，您可以看到随附的屏幕截图：

在此处输入图像描述

/*
    Label the data
    */
td:nth-of-type(1):before {
    content:"Products";
}
td:nth-of-type(2):before {
    content:"Indication";
}
td:nth-of-type(3):before {
    content:"Target";
}
td:nth-of-type(4):before {
    content:"Preclinical Research - IN-VIVO";
}
td:nth-of-type(5):before {
    content:"Preclinical Research - IN-TOXICOLOGY";
    width:auto;
    word-wrap:break-word;
    height:auto !important
}
td:nth-of-type(6):before {
    content:"Preclinical Research - IN-VITRO";
}
td:nth-of-type(7):before {
    content:"Studies for Early Patient Data";
}
}
4

1 回答 1

0

它通常有助于确保我们可以访问页面以实际编辑代码，而不仅仅是查看它。

tr{min-width:X}

解决方案非常简单。只需给 tr 一个最小宽度。我在这个 JSFiddle 中做到了：http: //jsfiddle.net/PCtQj/1/embedded/result/

在此处查看代码：http: //jsfiddle.net/PCtQj/1/

我给它的宽度是 500 像素，但你想让它变得更好一点，以便它真正响应视口，而不仅仅是定义像素。

编辑：我意识到在嵌入/结果页面的右上角有一个编辑代码。但为了简单起见，我们将通过查看代码更好地理解问题（此外，jsfiddle 页面有一个可以轻松调整大小的小视口）

于 2013-09-20T08:45:14.130 回答