HTML CSS Cách ngăn chặn ô bảng mở rộng

Question

Tôi có bảng được xây dựng với nội dung đến từ tập dữ liệu được trả về. Những gì tôi muốn làm là ngăn chặn một 'mô tả' tế bào từ mở rộng trên 280px rộng, không có vấn đề gì chiều dài nội dung (chuỗi của nó). Tôi đã thử:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" > 

Nhưng điều này dường như không hoạt động. Tôi không muốn nó quấn, tôi cũng không muốn bất cứ thứ gì trên 280px được hiển thị.

Answer 1

Dường như cú pháp HTML của bạn không chính xác cho ô bảng. Trước khi bạn thử ý tưởng khác bên dưới, hãy xác nhận xem điều này có hoạt động hay không ... Bạn cũng có thể thử thêm điều này vào bảng của mình: bảng bố cục: cố định ...

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;"> 
    [content] 
</td> 

New HTML

<td> 
    <div class="MyClass""> 
     [content] 
    </div> 
</td> 

CSS Class:

.MyClass{ 
    height: 280px; 
    width: 456px; 
    overflow: hidden; 
    white-space: nowrap; 
} 

Answer 2

<table border="1" width="183" style='table-layout:fixed'> 
    <col width="67"> 
    <col width="75"> 
    <col width="41"> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Text</td> 
    <td align="right">1</td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td>Abcdefg</td> 
    <td align="right">123</td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Abcdefghijklmnop</td> 
    <td align="right">123456</td> 
    </tr> 
</table> 

Tôi biết đó là trường học cũ, nhưng cho rằng một thử, nó hoạt động.

cũng có thể muốn thêm này:

<style> 
    td {overflow:hidden;} 
</style> 

Tất nhiên, bạn muốn đặt điều này trong một stylesheet liên kết riêng biệt, chứ không phải nội tuyến ... sẽ không bạn;)

Answer 3

Bạn có thể không kiểm soát chiều rộng của ô bảng (td) trừ khi bạn bọc nội dung bên trong bộ điều khiển vùng chứa như div. Hàm jQuery sau đây sẽ bọc nội dung của mỗi td bên trong một div.

function WrapTableCellsWithDiv(tableId) 
{ 
    $('#' + tableId + ' tbody tr td').each(function() 
    { 
     //get corresponding th of this td 
     var tdIndex = $(this).index(); 
     var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')'); 
     var thWidth = $(th).width(); 

     //wrap the contents of td inside a div 
     var tdContents = $(this).html(); 
     var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>'; 
     $(this).html(divTag); 
    }); 
} 

Chức năng này sẽ quấn nội dung của mỗi phần tử td bên trong một thẻ div. Chiều rộng của thẻ div sẽ được đặt thành chiều rộng của phần tử th tương ứng. cấu trúc bảng

mẫu:

<table id="SampleTable"> 
    <thead> 
     <tr> 
      <th style="width: 90px;">FirstName</th> 
      <th style="width: 90px;">LastName</th> 
      <th style="width: 60px;">Age</th> 
      <th style="width: 70px;">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Smith</td> 
      <td>25</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ted</td> 
      <td>Eddie</td> 
      <td>22</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Angel</td> 
      <td>Mike</td> 
      <td>23</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

Không javascript, chỉ cần CSS. Hoạt động tốt!

.no-break-out { 
     /* These are technically the same, but use both */ 
     overflow-wrap: break-word; 
     word-wrap: break-word; 

     -ms-word-break: break-all; 
     /* This is the dangerous one in WebKit, as it breaks things wherever */ 
     word-break: break-all; 
     /* Instead use this non-standard one: */ 
     word-break: break-word; 

     /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
     -ms-hyphens: auto; 
     -moz-hyphens: auto; 
     -webkit-hyphens: auto; 
     hyphens: auto; 

    } 

Answer 5

Điều này có thể có ích, là câu trả lời trên chỉ là css:

td { 
    word-wrap: break-word; 
}