如何使表格单元格缩小宽度以仅适合其内容？ [英] How to make a table cell shrink width to fit only its contents?

问题描述

我希望表格具有100％的宽度，但只有一列应该有一个自由宽度，例如：

  | A | B | C | 
  

所以A和B列的宽度应与其内容的宽度相匹配，但C应该继续下去，直到表结束。

好的，我可以用像素来指定A和B的宽度，但问题是这些列的内容的宽度是不是固定的，所以如果我设置一个固定的宽度，它将完全不匹配内容：（b / b）

PS：我没有使用实际的表项，而是DL列表包裹在一个div中，div有display：table，dl有display：table-row，dt / dd display：table-cell ...

解决方案

如果我理解你，你有表格数据，但你想用 div 元素在浏览器中显示它（AFAIK表和div与display：表的行为大致相同）。

（这里是一个可用的jsfiddle： http://jsfiddle.net/roimergarcia/CWKRA/ ）

标记：

 < div class ='theTable'> 
< div class ='theRow'> 
< div class ='theCell'>第一个< / div> 
< div class ='theCell'> test< / div> 
< div class ='theCell bigCell'>这是很长的< / div> 
< / div> 
< div class ='theRow'> 
< div class ='theCell'> 2nd< / div> 
< div class ='theCell'>更多测试< / div> 
< div class ='theCell'>它仍然很长< / div> 
< / div> 
< / div> 
  

和CSS：

  .theTable {
 display：table; 
宽度：95％; / *或任何你的表的宽度* / 
} 
 .theRow {display：table-row} 
 .theCell {
 display：table-cell; 
 padding：0px 2px; / *只是一些填充，如果需要* / 
 white-space：pre; / *这会避免换行符* / 
} 
 .bigCell {
 width：100％; / *这将缩小其他单元格* / 
} 
  

可悲的部分是我不能一年前，当我真的需要它的时候这么做--_-！

I want the table to have 100% width, but only one column from it should have a free width, like:

| A | B | C                                                                  |

so the width of A and B columns should match the width of their contents, but the width of C should go on until the table ends.

Ok I could specify the width of of A and B in pixels, but the problem is that the width of the contents of these columns is not fixed, so if I set a fixed width it wouldn't match the contents perfectly :(

PS: I'm not using actual table items, but a DL list wrapped in a div. The div has display:table, dl has display:table-row, and dt/dd display:table-cell ...

解决方案

If I understood you, you have tabular data but you want to present it in the browser using div elements (AFAIK tables and divs with display:table behaves mostly the same).

(here is a working jsfiddle: http://jsfiddle.net/roimergarcia/CWKRA/)

The markup:

<div class='theTable'>
    <div class='theRow'>
        <div class='theCell' >first</div>
        <div class='theCell' >test</div>
        <div class='theCell bigCell'>this is long</div>
    </div>
    <div class='theRow'>
        <div class='theCell'>2nd</div>
        <div class='theCell'>more test</div>
        <div class='theCell'>it is still long</div>
    </div>
</div>​

And the CSS:

.theTable{
    display:table; 
    width:95%; /* or whatever width for your table*/
}
.theRow{display:table-row}
.theCell{
    display:table-cell;
    padding: 0px 2px; /* just some padding, if needed*/
    white-space: pre; /* this will avoid line breaks*/
}
.bigCell{
    width:100%; /* this will shrink other cells */
}​

The sad part is I couldn't do this one year ago, when I really needed it -_-!

这篇关于如何使表格单元格缩小宽度以仅适合其内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！