Làm thế nào để ẩn Bảng Row tràn?

Tôi có một số bảng html nơi dữ liệu văn bản quá lớn để vừa. Vì vậy, nó mở rộng các tế bào theo chiều dọc để thích ứng cho điều này. Vì vậy, hiện tại các hàng có tràn sẽ cao gấp hai lần các hàng có lượng dữ liệu nhỏ hơn. Điều này là không thể chấp nhận. Làm cách nào để buộc bảng có cùng chiều cao hàng là 1em?Làm thế nào để ẩn Bảng Row tràn?

Dưới đây là một số đánh dấu tái tạo sự cố. Bảng chỉ nên là chiều cao của một dòng, với văn bản tràn bị ẩn.

<!DOCTYPE html> 

<html> 
    <head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     table { width:250px; } 
     table tr { height:1em; overflow:hidden; } 
    </style> 
    </head> 
    <body> 
    <table border="1"> 
     <tr> 
     <td>This is a test.</td> 
     <td>Do you see what I mean?</td> 
     <td>I hate this overflow.</td> 
     </tr> 
    </table> 
    </body> 
</html>

Nguồn

2009-10-12 Josh Stodola

Bất kỳ lý do cụ thể nào bạn đang sử dụng '

' thay vì thực hiện nó bằng divs/spans + CSS? Phương pháp thứ 2 là nhiều hơn một nỗi đau để có được quyền nhưng cung cấp sự linh hoạt lớn hơn. Tôi không chắc chắn nó có thể làm những gì bạn muốn bằng cách sử dụng một bảng thông thường. –

+68

Tôi đang sử dụng 'bảng' vì tôi đang hiển thị dữ liệu dạng bảng! –

Trả lời

Cần phải xác định hai thuộc tính, table-layout:fixed trên table và white-space:nowrap; trên các tế bào. Bạn cũng cần phải di chuyển overflow:hidden; cho các tế bào quá

table { width:250px;table-layout:fixed; } 
table tr { height:1em; } 
td { overflow:hidden;white-space:nowrap; }

Here's a Demo. Được thử nghiệm trong Firefox 3.5.3 và IE 7

Nguồn

2009-10-12 14:58:49

Nhược điểm duy nhất (có vẻ như), là chiều rộng ô bảng là giống hệt nhau. Còn đường nào để vòng lại chỗ đó không? –

Không xa như tôi biết - Tôi tin rằng một giả định được thực hiện trên phần trình duyệt vì không có chiều rộng ô riêng lẻ nào được xác định, để phân chia chiều rộng bảng đồng đều giữa số ô. Cách duy nhất có thể để giải quyết vấn đề này là tôi có thể tính toán chiều rộng cho mỗi ô dựa trên số ký tự chứa (trong tổng số ký tự cho tất cả các ô), máy chủ hoặc phía máy khách (trước đây có lẽ là lựa chọn hiệu quả hơn). Điều này nghe có vẻ quá mức không? –

trong tổng số ký tự trong tất cả các ô trên hàng được đề cập là ý tôi trong bình luận cuối cùng của tôi :) –

Chỉ có nhược điểm (có vẻ như), là chiều rộng ô bảng giống hệt nhau. Bất kỳ cách nào để giải quyết vấn đề này? - Josh Stodola 12 tháng 10 tại 15:53

Chỉ cần xác định chiều rộng của bảng và chiều rộng cho mỗi ô trong bảng

cái gì đó như

table {border-collapse:collapse; table-layout:fixed; width:900px;} 
th {background: yellow; } 
td {overflow:hidden;white-space:nowrap; } 
.cells1{width:300px;} 
.cells2{width:500px;} 
.cells3{width:200px;}

Nó hoạt động như một nét duyên dáng: o)

Nguồn

2009-11-05 15:12:03 Popara

Nhưng chiều rộng sẽ dao động dựa trên lượng dữ liệu sẽ được hiển thị bên trong nó. Nó không giống như tôi đang sử dụng phông chữ đơn điệu ở đây !! –

Nói chung, nếu bạn đang sử dụng white-space: nowrap;, có thể vì bạn biết cột nào sẽ chứa nội dung kết thúc tốt đẹp (hoặc kéo dài ô). Đối với những cột này, tôi thường bọc nội dung của ô trong một số span với thuộc tính cụ thể class và áp dụng một số width cụ thể.

Ví dụ:

HTML:

<td><span class="description">My really long description</span></td>

CSS:

span.description { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 150px; 
}

Nguồn

2011-03-04 16:15:16 user645077

Hoạt động thực sự tốt .. – Ben

Cảm ơn bạn điều này rất hữu ích. –

Cách tiếp cận tốt hơn đặt toàn bộ bảng cố định. –

Trong hầu hết các trình duyệt hiện đại, bây giờ bạn có thể chỉ định:

<table> 
<colgroup> 
    <col width="100px" /> 
    <col width="200px" /> 
    <col width="145px" /> 
</colgroup> 
<thead> 
    <tr> 
    <th>My 100px header</th> 
    <th>My 200px header</th> 
    <th>My 145px header</th> 
    </tr> 
</thead> 
<tbody> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
    <td>200px is all you get - anything more hides due to overflow.</td> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
</tbody> 
</table>

Sau đó, nếu bạn áp dụng các phong cách từ các bài viết trên, như sau:

table { 
    table-layout: fixed; /* This enforces the "col" widths. */ 
} 
table th, table td { 
    overflow: hidden; 
    white-space: nowrap; 
}

Kết quả mang đến cho bạn tràn độc đáo ẩn trong suốt bàn. Hoạt động trong Chrome, Safari, Firefox và IE mới nhất. Tôi đã không được thử nghiệm trong IE trước khi 9 - nhưng tôi đoán là nó sẽ làm việc trở lại như xa như 7, và bạn thậm chí có thể nhận được may mắn, đủ để xem 5,5 hoặc 6 hỗ trợ. ;)

Nguồn

2012-06-13 21:15:21

Nếu javascript được chấp nhận làm câu trả lời, tôi đã tạo một plugin jQuery để giải quyết vấn đề này (để biết thêm thông tin về sự cố, hãy xem CSS: Truncate table cells, but fit as much as possible).

Để sử dụng plugin chỉ cần gõ

$('selector').tableoverflow();

Plugin:https://github.com/marcogrcr/jquery-tableoverflow

Full dụ:http://jsfiddle.net/Cw7TD/3/embedded/result/

Nguồn

2013-05-13 14:14:36 Marco

Here's một cái gì đó tôi đã cố gắng. Về cơ bản, tôi đặt nội dung "linh hoạt" (td chứa các dòng quá dài) trong một vùng chứa div cao một dòng, với tràn ẩn. Sau đó, tôi để cho các văn bản bọc vào vô hình. Bạn nhận được phá vỡ tại wordbreaks mặc dù, không chỉ là một cắt mịn.

table { 
    width: 100%; 
} 

.hideend { 
    white-space: normal; 
    overflow: hidden; 
    max-height: 1.2em; 
    min-width: 50px; 
} 
.showall { 
    white-space:nowrap; 
} 

<table> 
    <tr> 
     <td><div class="showall">Show all</div></td> 
     <td> 
      <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div> 
     </td> 
     <td> 
      <div class="showall">Show all this too</div> 
     </td> 
    </tr> 
</table>

Nguồn

2014-02-27 08:52:53

Tôi nên thêm rằng lợi thế ở đây là tôi không cần đặt bất kỳ độ rộng tuyệt đối nào của các cột. Thiết kế là chất lỏng. –

Vấn đề ở đây là, làm cách nào để bạn biết ô nào sẽ gán lớp nào? Trừ khi bạn gõ thủ công mọi trang bạn cần, Web 1.0, đây không phải là giải pháp toàn diện. –

quấn bảng trong một div với class = "container"

div.container { 
    width: 100%; 
    overflow-x: auto; 
}

sau đó

#table_id tr td { 
    white-space:nowrap; 
}

kết quả

Nguồn

2018-03-03 08:57:13

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