3

我有要在固定大小的列中呈现的数据行。例如：

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 来说是可以管理的。

4

2 回答 2

1

好问题。我找不到使用普通表格的方法（部分原因是需要包装元素，部分原因是 IE 无法正常运行），因此下面的解决方案使用 div。

试试这个：

<!DOCTYPE html>
<title>Test Case</title>
<style type="text/css">
    body { font-size:11px; font-family: "Courier New"; }
    * { margin:0; padding:0; }

    .col, .span { display:inline-block; }
    .col1 { min-width:12ex; }
    .span2 { min-width:30ex; }
    .span3 { min-width:40ex; }

    /* IE6 */
    * html .col { display:inline; padding-right:1ex; }
    * html .span { display:inline; white-space:nowrap; }
    * html .col1 { width:12ex; }
    * html .span2 { width:30ex; }
    * html .span3 { width:40ex; }

    /* IE7 */
    *:first-child+html .col { display:inline; padding-right:1ex; }
    *:first-child+html .span { display:inline; }
</style>
<div class="table">
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Name</div>
      <div class="col">City</div>
    </div>
    <div class="col">Number</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Adam</div>
      <div class="col">Anaheim</div>
    </div>
    <div class="col">714 555 5555</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Bob</div>
      <div class="col">Barstow</div>
    </div>      
    <div class="col">760 555 5555</div>
  </div>
  <div class="row">
    <div class="span3 span">
      <div class="span2 span">
        <div class="col1 col">Constantine</div>
        <div class="col">Canyon</div>
      </div>         
      <div class="col">805 555 5555</div>
    </div>         
    <div class="col"># Notice how phone number is still aligned :)</div>
  </div>
</div>

应该清楚如何通过使用包装器“span4”、“span5”等将这个想法扩展到更多列。

于 2010-11-14T19:02:51.073 回答
0

我建议你在 td < 中使用 divtd><div class="mydiv">your content</div></td>

然后你放弃css .mydiv {overflow:auto;}，这将在需要时添加滚动而不破坏你的桌子。

编辑 - 我刚刚看到您使用 div 而不是表格。为什么这个？

在任何情况下，您都可以使用属性display:table; display:table-row;和display:table-cell;来表示表格数据。

这里有一个例子http://jsbin.com/evoka3/3

于 2010-11-14T11:33:35.633 回答