我有一张宽100%的桌子.如果我将<td>s放入其中,它们会以相等长度的列展开.但是,我希望除了last之外的所有列都具有尽可能小的宽度,而不包装文本.
我首先做的是我设置width="1px"了<td>除了最后一个以外的所有(虽然已经弃用,但style="width:1px"没有任何效果),这在我在列中有多字数据之前工作正常.在这种情况下,为了保持尽可能小的长度,它包裹了我的文本.
让我来证明一下.想象一下这张表:
---------------------------------------------------------------------------------
element1 | data | junk here | last column
---------------------------------------------------------------------------------
elem | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more | of | these | rows
---------------------------------------------------------------------------------
无论我尝试什么,我一直得到的是这样的:
---------------------------------------------------------------------------------
element1 | data | junk here | last column
---------------------------------------------------------------------------------
elem | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more | of | these | rows
---------------------------------------------------------------------------------
或者(即使我设定style="whitespace-wrap:nowrap")这个:
---------------------------------------------------------------------------------
| | …我想在桌子旁边放 3 个 div。表格应该根据里面的内容进行扩展，并且 3 个 div 应该平均占据剩余的空闲空间。
我需要将 div 堆叠在移动视图上的桌子下方，如下所示......
Desktop:
[div-1] [div-2] [div-3] [table]
Mobile:
[table]
[div-1]
[div-2]
[div-3]
我一直在尝试使用 Flex 来使其正常工作，但我无法使表格根据内部内容进行扩展。
我无法使用，td {white-space: nowrap;}因为在移动设备上它将文本推出屏幕一侧。我需要表格根据内部内容进行扩展，但不应将内容强制扩展到屏幕之外。它需要像平常一样在较小的屏幕上环绕。
这是我的工作示例：http://codepen.io/anon/pen/qadbkK ?editors=1100
Desktop:
[div-1] [div-2] [div-3] [table]
Mobile:
[table]
[div-1]
[div-2]
[div-3]
/* Do this on tablet size and up */
@media (min-width: 481px) {
/* Main outer div of helper items AND subtotals */
.cart-collaterals {
display: inline-flex;
}
/* Outer div of helper items */
.cart-helper-outer {
order: …