Khớp chiều rộng ô với nội dung

Đưa ra đánh dấu sau đây, làm cách nào tôi có thể sử dụng CSS để buộc một ô (tất cả các ô trong cột) khớp với chiều rộng của nội dung bên trong chứ không phải kéo dài (đó là hành vi mặc định)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDIT: Tôi nhận ra rằng tôi có thể cứng mã chiều rộng, nhưng tôi không muốn làm điều đó, vì nội dung sẽ đi trong cột đó là động.

Nhìn vào hình ảnh dưới đây, hình ảnh đầu tiên là những gì đánh dấu tạo ra. Hình ảnh thứ hai là những gì tôi muốn.

Tôi không chắc là tôi có hiểu câu hỏi của bạn không, nhưng tôi sẽ đâm vào nó. Ví dụ về ví dụ .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

Cài đặt

max-width:100%;
white-space:nowrap;

sẽ giải quyết vấn đề của bạn.

Đối với tôi, đây là tính năng tự động hóa và tự động hóa tốt nhất cho bảng và các cột của nó (sử dụng css! Quan trọng ... chỉ khi bạn không thể không có)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Không chỉ định chiều rộng css cho bảng hoặc cho cột bảng. Nếu nội dung bảng lớn hơn, nó sẽ vượt quá kích thước màn hình.

Đặt chiều rộng CSS thành 1% hoặc 100% của một phần tử theo tất cả các thông số kỹ thuật tôi có thể tìm hiểu có liên quan đến cha mẹ. Mặc dù Blink Rendering Engine (Chrome) và Gecko (Firefox) tại thời điểm viết dường như xử lý tốt 1% hoặc 100% (làm cho cột co lại hoặc cột để lấp đầy không gian có sẵn), nhưng nó không được đảm bảo theo tất cả các thông số kỹ thuật CSS Tôi có thể tìm thấy để làm cho nó đúng.

Một tùy chọn là thay thế bảng bằng div div CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Điều đó hoạt động trong các trình duyệt mới, ví dụ IE11 + xem bảng ở cuối bài viết.

Có rất nhiều cách để làm điều này!

sửa tôi nếu tôi sai nhưng câu hỏi đang tìm kiếm loại kết quả này.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

2 trường đầu tiên sẽ "chia sẻ" trang còn lại (LƯU Ý: nếu bạn thêm nhiều văn bản vào các trường 50% thì sẽ mất nhiều không gian hơn) và trường cuối cùng sẽ thống trị bảng liên tục.

Nếu bạn vui lòng để văn bản bọc bạn có thể di chuyển khoảng trắng: nowrap; theo kiểu của trường thứ 3
sẽ là cách duy nhất để bắt đầu một dòng mới trong trường đó.

cách khác, bạn có thể đặt độ dài trên trường cuối cùng tức là. chiều rộng: 150px và để lại tỷ lệ phần trăm trên 2 trường đầu tiên.

Hi vọng điêu nay co ich!

Đơn giản :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>