表列，使用css设置最小和最大宽度 [英] Table columns, setting both min and max width with css

问题描述

我想有一个表，在列中可以伸展，但我有一个小的麻烦最小和最大宽度在CSS。

看起来这些工具如何工作也有一些冲突的答案：

• 最小/最大宽度应该工作：，其中我删除了所有的边框和paddings和边框间距，所以你可以更准确地测量宽度。
  
  

  I would like to have a table which in the columns can stretch but I'm having a little trouble with min and max width in css.

  It also seems that theres some conflicting answers around how this works:

  • min/max width should work: Prevent text from overlap table td width
  • min/max width are unsupported: Min-width and max-height for table attributes

  I would like to have the following

  table{
     width:100%;
  }
  .a, .b, .c
  {
      background-color: red;
  }
  .a
  {
      min-width: 10px;
      max-width: 20px;
  }
  .b
  {
      min-width: 40px;
      max-width: 45px;
  }
  .c
  {
  }
  
  <table>
      <tr>
          <td class="a">A</td>
          <td class="b">B</td>
          <td class="c">C</td>
      </tr>
  </table>
  

  Is there a way of achieving this without javascript (ie constrained stretching of columns with a table)?

  • I only need this to work with CSS3 + HTML5
  • a jsfiddle with stuff not expanding: http://jsfiddle.net/4b3RZ/10/
  • if I set only min-width on the columns i get a proportional stretch:http://jsfiddle.net/4b3RZ/8/

  below is a table of what actually gets rendered for some different css setups:

  解决方案

  Tables work differently; sometimes contra-intuitively.

  The solution is to use width on the table cells, instead of max-width.

  Although it may sound like in that case the cells won't shrink below the given width, they will actually.
  with no restrictions on c, if you give the table a width of 70px, the widths of a, b and c will come out as 16, 42 and 12 pixels, respectively.
  With a table width of 400 pixels, they behave like you say you expect in your grid above.
  Only when you try to give the table too small a size (smaller than a.min+b.min+the content of C) will it fail: then the table itself will be wider than specified.

  I made a new fiddle, in which I removed all the borders and paddings and border-spacing, so you can measure the widths more accurately.

  这篇关于表列，使用css设置最小和最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！