Sử dụng calc() với các bảng

Question

Tôi đang cố gắng để có được một bảng với chiều rộng cố định td s và chiều rộng biến td s.

Im sử dụng chức năng CSS calc(), nhưng bằng cách nào đó có vẻ như tôi không thể sử dụng % trong bảng.

Vì vậy, đó là những gì tôi có cho đến nay:

<table border="0" style="width:100%;border-collapse:collapse;"> 
    <tr style="width:100%"> 
     <td style="width:30px;">1</td> <!--Fixed width--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Title</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 20);">Album</td> <!--Width should be 20% of the remaining space--> 
     <td style="width:80px;">Year</td><!--Fixed width--> 
     <td style="width:180px;">YouTube</td><!--Fixed width--> 
    </tr> 
</table> 

Làm thế nào tôi nhìn thấy nó, nó sẽ hoạt động, nhưng nó không phải là.

Có ai biết cách giải quyết vấn đề này không? Hoặc có thể có một đề nghị khác làm thế nào tôi có thể đạt được mục tiêu của tôi?

Answer 1

Bảng có các quy tắc khó về phân phối không gian của các cột vì chúng phân phối không gian phụ thuộc vào nội dung của ô theo mặc định. Calc (atm) chỉ wont làm việc với điều đó.

Tuy nhiên, bạn có thể đặt thuộc tính table-layout cho số table để buộc các phần tử con td lấy chiều rộng chính xác mà bạn đã khai báo. Để làm việc này, bạn cũng cần một công việc width (100%) trên bàn.

table{ 
    table-layout:fixed; /* this keeps your columns with at the defined width */ 
    width: 100%;  /* a width must be specified */ 

    display: table;  /* required for table-layout to be used 
          (since this is the default value it is normally not necessary; 
          just included for completeness) */ 
} 

và sau đó sử dụng phần trăm đơn giản trên các cột còn lại.

td.title, td.interpret{ 
    width:40%; 
} 
td.album{ 
    width:20%; 
} 

Sau khi sử dụng hết không gian cho cột chiều rộng cố định, khoảng trống còn lại được phân phối giữa các cột có chiều rộng tương đối.

Để làm việc này, bạn cần loại hiển thị mặc định display: table (ngược với câu nói, display: block). Tuy nhiên, điều này có nghĩa là bạn không còn có thể có height (bao gồm min-height và max-height) cho bảng.

See your modified Example.

Answer 2

Calc là hàm tổng quát.

-webkit-calc dành cho webkit.

Thêm những thứ đó theo trình duyệt bạn đang sử dụng.

Bất kể chức năng -calc- của bạn sẽ bị bỏ qua. có 3 td sẽ là 40% chiều rộng còn lại? Thats 120% trong tổng số. Đây là cái bàn. Chiều rộng của cha mẹ sẽ luôn được ưu tiên.

Tuy nhiên, nếu bạn có TD trong 5%, tổng chiều rộng sẽ nhỏ hơn chiều rộng của bảng, do đó nó cũng sẽ bị bỏ qua.

Dòng dưới cùng: không sử dụng calc với bảng.