使用 CSS 呈现表格数据，太宽的单元格不会破坏事物

发布于 2024-10-01 20:40:33 字数 1084 浏览 8 评论 0原文

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

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" 内，其最小宽度是前 N-1 列的组合宽度。然后在该 DIV 内，前 N-2 列必须包裹在一个类似的 div 内，其最小宽度是前 N-2 列的组合宽度。一直这样下去……

虽然不太漂亮，但是很有效，而且对于小 N 来说是可以管理的。

原文

I have rows of data that I want to present in fixed-size columns. For example:

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
...      ...        ...

However, occasionally one of the column's data is too big to fit. If that happens, I want it to affect as few neighboring cells as possible, not the whole row if it doesn't have to.

Here's what I DO want:

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 :)

Here's what I DON'T want:

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 :(

How do I do this with HTML/CSS (no javascript please)?

Here's a jsbin with a non-working solution, where you can play around and see for yourself.

UPDATE Here's a summary of the accepted answer, when you have N columns:

The first N-1 columns have to be wrapped inside a DIV style="display: inline-block" whose min-width is the combined width of the first N-1 columns. Then inside that DIV, the first N-2 columns have to be wrapped inside a similar div whose min-width is the combined width of the first N-2 columns. Continue this all the way down...

It's not pretty, but it works, and is manageable for small N.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

季末如歌 2024-10-08 20:40:33

好问题。我找不到使用普通表格执行此操作的方法（部分是因为需要包装元素，部分是因为 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”等将这个想法扩展到更多列。

Good question. I couldn't find a way to do it with a normal table (partly because of the wrapper elements required, partly because IE wouldn't behave properly) so the solution below uses divs.

Try this:

<!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>

It should be clear how to expand this idea to further columns by using wrappers "span4", "span5", etc.

回复收藏 0 原文