如何为响应表提供自动宽度

Question

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

这是我的小提琴

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";
}
}

Answer 1

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

tr{min-width:X}

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

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

我给它的宽度是500px，但是你想让它更好一点，以便它实际上响应视口而不是仅仅定义像素。

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