2012-01-17 20 views
8

Tôi có một bảng nơi số lượng cột có thể thay đổi (từ 1 đến 10), ngoại trừ một cột nên luôn ở một chiều rộng cố định để không có thêm khoảng trống hoặc không được bọc (nó sẽ là được sử dụng để thêm hoặc xóa các hàng trong bảng).Tôi có thể trộn chiều rộng phần trăm và chiều rộng pixel trong tiêu đề bảng html của mình không?

Bảng không được rộng hơn tổng số 800px và tôi muốn có nút gửi được lưu hành ở bên phải.

Có cách nào để đặt độ rộng cột bảng đang thay đổi dưới dạng phần trăm không và một cột tĩnh có chiều rộng pixel cố định không? Hay điều đó sẽ gây ra vấn đề? Tôi đã thử một số cách tiếp cận khác nhau, nhưng tất cả dường như không tối ưu. Có một cách thanh lịch để làm điều này? Tôi đã đính kèm một hình ảnh để tham khảo: http://bayimg.com/BAlLLaaDP.

HTML:

<html> 
    <head> 
    <style> 
     #container { 
     width: 800px; 
     } 
     #table_container { 
     padding:5px; 
     } 
     #table_container table { 
     width: 85%; 
     } 
     .action { 
     } 
     col { 
     width:29%; 
     } 
     table { 
     width:650px; 
     table-layout: fixed; 
     float: left; 
     } 
    </style> 
    </head> 

<body> 
<div id="container" class="clearfix"> 

    <form> 
      <table class="" border=1> 
       <colgroup> 
        <col > 
        <col> 
        <col> 
        <col class="action"> 
       </colgroup> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email </th> 
       <th></th> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
      </table> 
     <div class="mult_answer"> 
      <button class="button orange">Submit Answer</button> 
     </div> 
     </form> 

</div> 

</body> 
</html> 

Trả lời

5

Có thể có hàng với chiều rộng bằng pixel và tỷ lệ phần trăm trong một bảng nếu tổng chiều rộng của tất cả các hàng không phải là hơn 100% (nếu có nhiều hơn hàng hoặc bảng sẽ được thu nhỏ để nội dung phù hợp).
Bạn có thể thêm chiều rộng thành các phần tử th nếu bạn đang sử dụng col chỉ với mục đích chiều rộng. Tốt hơn là để lại ít nhất một cột không có chiều rộng để nó có thể co lại để vừa.
P.S. Tôi không hiểu tại sao bạn cần width: 100%; cho thành phần td.

+0

Cảm ơn. Tôi đã loại bỏ chiều rộng cho phần tử td, không được cho là ở đó. – David