Setting của nội dung ô trong bảng dựa trên chiều rộng có sẵn

Tôi có một bảng HTML mà các tế bào chứa, trong số những thứ khác, nhịp, như thế này:Setting của nội dung ô trong bảng dựa trên chiều rộng có sẵn

... 
<td> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
</td> 
...

Tôi đang tìm kiếm một cách để thu hẹp chiều rộng của những nhịp đó, thay vì dòng bọc chúng, khi ô chứa bảng quá hẹp để hiển thị tất cả chúng trên một dòng. Tôi đã thử chơi xung quanh với thiết lập các nhịp 'max-width thành 20px và sau đó sử dụng một phần trăm cho chiều rộng, nhưng điều đó không hoạt động vì ô bảng cố gắng chỉ rộng bằng nội dung của nó.

Chiều rộng ô tối thiểu của bảng sẽ là chiều rộng cần thiết để hiển thị tiêu đề trên 1 dòng.

Đối với các loại hình ảnh, đây là những gì tôi hiện có khi có đủ chiều rộng:

enter image description here

Dưới đây là những gì tôi hiện có khi không có đủ chiều rộng:

enter image description here

Và đây là những gì tôi muốn nó trông giống như khi không có đủ chiều rộng cho mỗi khoảng là 20px đầy đủ:

enter image description here

Trong trường hợp đó là không rõ ràng, các nhịp là các ô vuông màu trong TXEs, RDBs, và RavenNets cột.

Nguồn

2010-02-17 Matt Ball

+1 để đặt câu hỏi rõ ràng, chính xác và với mô hình của những gì bạn có và những gì bạn cần! :) –

+1 tương tự. Mẫu tốt –

Cảm ơn. Tôi không thấy ai muốn xem mã nguồn HTML chỉ có FF của tôi, và bạn biết họ nói gì về giá trị của một từ trong hình ảnh ... –

Tôi không thể tìm được cách CSS tinh khiết thỏa đáng để làm những gì tôi muốn. Tôi đã có một tập tin cấu hình ứng dụng thực hiện (như một tập tin .ini, nhiều hơn hoặc ít hơn) vì vậy tôi chỉ cần thêm chiều rộng mong muốn của tôi vào cấu hình này. Nó không phải là một giải pháp đa năng nhưng nó phù hợp với yêu cầu của tôi.

Nguồn

2010-02-22 16:08:37

Bạn đã cân nhắc đặt chiều rộng tối thiểu trên td chưa? hoặc một div bao bọc bên trong td, nhưng bên ngoài các nhịp?

Nguồn

2010-02-17 19:17:15

Chiều rộng 'td' là vấn đề ở đây. Vấn đề không phải là 'td' đang trở nên quá hẹp. Ngược lại, 'td' chính xác rộng như nó cần. Vấn đề là ép nội dung của 'td' để chúng không bị quấn vào dòng kế tiếp. –

Sử dụng <td nowrap> hoặc <td style="white-space:nowrap;"> để tránh bị gói. Một ô bảng thường mở rộng để phù hợp với nội dung của nó, trừ khi nó được phép bọc, hoặc bạn đã hạn chế chiều rộng của nó theo một cách khác.

Nguồn

2010-02-17 19:24:32 Ray

Tôi đã thử cả hai (chúng cũng làm như vậy) nhưng điều đó không hiệu quả, như tôi mong đợi. Tôi có (hiện tại) thiết lập một chiều rộng rõ ràng về nội dung của ô và, có, chiều rộng ô bị hạn chế - đó là lý do tại sao tôi cần thu nhỏ nội dung của nó ở vị trí đầu tiên. –

@bears - tên đáng sợ! - À, tôi nghĩ tôi sẽ cố gắng rõ ràng trước. Cài đặt chiều rộng chỉ hoạt động trên các phần tử chặn khối, không chỉ trên các nhịp. Nội dung của các nhịp của bạn là gì? Làm thế nào là bộ màu? Hình ảnh? Màu BG? ? – Ray

Các nhịp trống. Cho đến khoảng 30 phút trước khi tôi đăng câu hỏi của tôi, các nhịp là các div là 'float: left' ed; họ cư xử chính xác như nhau. Tôi cũng đã chơi xung quanh bằng cách sử dụng 'display: inline-block' để kết thúc. Màu được đặt bằng nền '-moz-linear-gradient'. –

Sắp xếp này dường như làm điều gì đó gần với những gì bạn muốn trong Firefox 3.6. Yêu cầu quan trọng có vẻ là chiều rộng của bảng không thể bằng pixel.

<!DOCTYPE HTML> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 

<style type="text/css"> 
    .indicator { 
     display:block; 
     white-space:nowrap; 
     min-width:8px; 
     max-width:300px; 
     width:100%; 
    } 

    .indicator li { 
     border:outset 2px; 
     display:inline-block; 
     height:80px; 
     min-width:2px; 
     max-width:80px; 
     padding:0 0 0 2px; 
     width:25%; 
    } 

    .ok { background:#0f0 } .caution { background:#ff0 } 
    .alert { background:#f00 } .inactive { background:#0ff } 

    table { width:100% } 
    td { width:100% } 

</style> 

</head> 

<body> 

<table><tr><td> 
<ul class="indicator"> 
    <li class="ok"></li> <li class="caution"></li> 
    <li class="alert"></li> <li class="inactive"></li> 
</ul> 
</td></tr></table> 

</body> 
</html>

Nguồn

2010-02-17 20:00:47

Setting của nội dung ô trong bảng dựa trên chiều rộng có sẵn

Trả lời

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