Buộc chiều rộng cột bảng luôn được cố định bất kể nội dung

Question 1

Tôi có một bảng html với table-layout: fixedvà một td với chiều rộng đã đặt. Cột vẫn mở rộng để giữ nội dung của văn bản không chứa khoảng trắng. Có cách nào để khắc phục điều này ngoài việc gói nội dung của mỗi td trong một div không?

Ví dụ: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

Trong ví dụ này, bạn có thể thấy rằng cột có AAAAAAAAAAAA ... mở rộng mặc dù được đặt rõ ràng là rộng 50px.

Question 2

Chỉ định chiều rộng của bảng:

table
{
    table-layout: fixed;
    width: 100px;
}

Xem jsFiddle

Question 3

Hãy thử xem xét CSS sau:

word-wrap:break-word;

Theo mặc định, trình duyệt web không nên chia nhỏ các "từ" nên những gì bạn đang gặp phải là hành vi bình thường của trình duyệt. Tuy nhiên, bạn có thể ghi đè điều này bằng chỉ thị CSS bọc từ.

Bạn sẽ cần đặt chiều rộng trên bảng tổng thể sau đó đặt chiều rộng trên các cột. "chiều rộng: 100%;" cũng nên được tùy thuộc vào yêu cầu của bạn.

Sử dụng word-wrap có thể không phải là điều bạn muốn tuy nhiên nó rất hữu ích để hiển thị tất cả dữ liệu mà không làm biến dạng bố cục.

Question 4

Làm cho bàn đá vững chắc TRƯỚC khi css. Hình chiều rộng bảng của bạn, sau đó sử dụng hàng 'kiểm soát' theo đó mỗi td có chiều rộng rõ ràng, tất cả đều cộng với chiều rộng trong thẻ bảng.

Việc phải thực hiện hàng trăm email html để hoạt động ở mọi nơi, trước tiên hãy sử dụng đúng HTML, sau đó tạo kiểu w / css sẽ giải quyết được nhiều vấn đề trong tất cả IE, webkit và mozillas.

vì thế:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Sẽ giữ một bảng có chiều rộng 300px. Xem hình ảnh có kích thước lớn hơn chiều rộng theo các điểm cực trị

Question 5

Bạn có thể thêm a divvào td, sau đó tạo kiểu đó. Nó sẽ hoạt động như bạn mong đợi.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Sau đó, css.

td div { width: 50px; overflow: hidden; }

Question 6

Bạn cũng có thể làm việc với "tràn: ẩn" hoặc "tràn-x: ẩn" (chỉ cho chiều rộng). Điều này yêu cầu chiều rộng xác định (và / hoặc chiều cao?) Và có thể là cả "display: block".

"Overflow: Hidden" ẩn toàn bộ nội dung, không vừa với ô đã xác định.

Thí dụ:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

CHỈNH SỬA: Xấu hổ về tôi, tôi đã thấy, bạn đã sử dụng "tràn". Tôi đoán nó không hoạt động, bởi vì bạn không đặt "display: block" cho phần tử của mình ...

Question 7

Tôi sẽ thử đặt nó thành max-width: 50px;

Question 8

Bạn cũng có thể sử dụng tỷ lệ phần trăm và / hoặc chỉ định trong tiêu đề cột:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Phần thưởng với tỷ lệ phần trăm là bảo trì mã thấp hơn: bạn có thể thay đổi chiều rộng bảng của mình mà không cần phải chỉ định lại chiều rộng cột.

Lưu ý: Tôi hiểu rằng chiều rộng bảng được chỉ định bằng pixel không được hỗ trợ trong HTML 5; bạn cần sử dụng CSS để thay thế.

Question 9

Điều này phù hợp với tôi

td::after { 
content: ''; 
display: block; 
width: 30px;
}