Chiều rộng tối thiểu và chiều cao tối đa cho thuộc tính bảng

Tôi có bảng và tôi muốn xác định các thuộc tính min-width và max-height. Xem ví dụ bên dưới.Chiều rộng tối thiểu và chiều cao tối đa cho thuộc tính bảng

Vấn đề của tôi bây giờ là trình duyệt không thực hiện. Nếu tôi xác định nó trên td nó bị bỏ qua, nếu tôi xác định nó trong một phần tử div bên trong một phần tử td, nội dung có chiều rộng tối thiểu và tối đa phù hợp, nhưng bảng vẫn có cùng kích thước. (do đó, có rất nhiều không gian trống: /)

Tôi làm cách nào để giải quyết vấn đề này?

EDIT: Tôi vừa nhận thấy rằng vấn đề dường như chỉ xảy ra khi bảng ở chế độ toàn màn hình. Tuy nhiên, một yếu tố không nên có nhiều hơn chiều rộng tối đa hơn!

Ví dụ:

<html> 
<head> 
    <style type="text/css"> 
     td { 
      border: 1px solid black; 
     } 

     html,body,.fullheight { 
      height: 100%; 
      width: 100%; 
     } 
     .minfield { 
      max-width: 10px; 
      border: 1px solid red; 
      overflow: hidden; 
     } 
    </style>  
</head> 

<body> 
    <table class="fullheight"> 
     <tr> 
      <td class="minfield"> 
       <div class="minfield"> 
        <p>hallo</p> 
       </div> 
      </td> 
      <td><p>welt</p></td> 
     </tr> 
    </table> 
</body> 
</html>

Nguồn

2011-06-21 Stefan

Đối với ô trong bảng thuộc tính 'width' nên được sử dụng, như là 'min-width' và 'max-width' là undefined cho ô trong bảng. Xem specification:

"Trong CSS 2.1, hiệu ứng của 'chiều rộng tối thiểu' và 'chiều rộng tối đa' trên bảng, bảng nội tuyến, ô bảng, cột bảng và nhóm cột không xác định."

Để thực thi chiều rộng, bạn có thể thử thay đổi thuộc tính table-layout thành "cố định". Đặc điểm kỹ thuật mô tả thuật toán khá rõ ràng.

Nguồn

2011-06-21 14:34:19 Arsen7

nhờ:/Tôi đoán ... nhiệm vụ đơn giản, nhưng không thể với CSS :(, có lẽ ai đó Postes một giải pháp :) – Stefan

Tại sao bạn nghĩ đó là không thể với CSS? Nếu tôi thay đổi 'chiều rộng tối thiểu' thành 'chiều rộng' trong mã của bạn, cột đầu tiên rất mỏng và cột thứ hai là rộng. Điều gì không hiệu quả trong trường hợp của bạn? Lưu ý rằng 'width' nên được áp dụng cho 'td' trong khi 'max-width' vẫn hoàn toàn chính xác với 'div'. – Arsen7

well, divs work :), nhưng không phải như tôi muốn: ( – Stefan

-1

Tôi không thấy sự cố với cài đặt chiều rộng tối thiểu cho bảng và ô. Xem này jsFiddle.

HTML:

<table style="border:solid 1px #000;"> 
    <tr> 
     <td id="cell-one" style="border:solid 1px #000;"> 
      test 1 
     </td> 
     <td style="border:solid 1px #000;"> 
      test 2 
     </td> 
    </tr> 
</table>

và CSS:

table{width: 90%;} 
td#cell-one{min-width: 20%;}

Hãy nhớ rằng, min-width là phụ thuộc vào chiều rộng (hoặc max-width). chiều rộng tối đa ghi đè chiều rộng và chiều rộng tối thiểu ghi đè chiều rộng hoặc chiều rộng tối đa. Nói cách khác, hãy chắc chắn đặt thuộc tính chiều rộng trên phần tử gốc của phần tử bạn áp dụng chiều rộng tối thiểu cho: jsFiddle

Nguồn

2013-02-02 08:55:06 symlink

Điều này không làm gì cả; chiều rộng ô trong ví dụ của bạn luôn là 50/50, bởi vì 'min-width' và' max-width' không có hiệu lực trên các ô bảng theo thông số. – Slight

Để buộc thuộc tính chiều cao tối thiểu cho td bạn cũng có thể đặt hình ảnh ẩn trong td hoặc bọc bạn td vào div. Ví dụ cho trường hợp đầu tiên:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

Nguồn

2013-05-21 12:46:45 macloving

Tại sao không ... fiddle: http://jsfiddle.net/LpLDq/ – Stefan

Đây là thứ duy nhất làm việc cho tôi, để lấy các ô trong bảng có chiều rộng thay đổi để tôn trọng giá trị độ rộng tối thiểu. Cảm ơn rất nhiều vì điều này. – JosephK

Chiều rộng tối thiểu và chiều cao tối đa cho thuộc tính bảng

Trả lời

Các vấn đề liên quan