我有要在固定大小的列中呈现的数据行。例如:
Name City Number
Adam Anaheim 714 555 5555
Bob Barstow 760 555 5555
... ... ...
但是,有时某一列的数据太大而无法容纳。如果发生这种情况,我希望它影响尽可能少的相邻单元格,如果不需要的话,不要影响整个行。
这就是我想要的:
Name City Number
Adam Anaheim 714 555 5555
Bob Barstow 760 555 5555
Constantine Canyon 805 555 5555 # Notice how phone number is still aligned :)
这是我不想要的:
Name City Number
Adam Anaheim 714 555 5555
Bob Barstow 760 555 5555
Constantine Canyon 805 555 5555 # Notice how phone number is also shifted :(
我如何使用 HTML/CSS(请不要使用 javascript)来做到这一点?
这是一个带有非工作解决方案的jsbin,您可以在其中玩耍并亲自查看。
更新当您有 N 列时,这是接受的答案的摘要:
前 N-1 列必须包含在 DIV style="display: inline-block" 中,其 min-width 是前 N-1 列的组合宽度。然后在该 DIV 中,前 N-2 列必须包裹在一个类似的 div 中,该 div 的 min-width 是前 N-2 列的组合宽度。一直这样下去……
它不漂亮,但它有效,并且对于小 N 来说是可以管理的。