Chiều rộng ô cố định

Rất nhiều người vẫn sử dụng bảng để điều khiển bố cục, dữ liệu, v.v. - một ví dụ về điều này là jqGrid phổ biến. Tuy nhiên, có một số phép thuật xảy ra mà tôi dường như không thể hiểu được (các bàn của nó khóc rất to, có thể có bao nhiêu phép thuật?)

Làm thế nào có thể đặt chiều rộng cột của bảng và tuân theo như jqGrid!? Nếu tôi cố gắng sao chép này, ngay cả khi tôi đặt mọi thứ <td style='width: 20px'>, ngay khi nội dung của một trong các ô đó lớn hơn 20px, ô sẽ mở rộng!

Bất kỳ ý tưởng hoặc hiểu biết?

Bạn có thể thử sử dụng <col>thẻ quản lý kiểu bảng cho tất cả các hàng nhưng bạn sẽ cần đặt table-layout:fixedkiểu trên lớp <table>hoặc bảng css và đặt overflowkiểu cho các ô

https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

và đây là CSS của bạn

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Bây giờ trong HTML5 / CSS3, chúng tôi có giải pháp tốt hơn cho vấn đề. Theo tôi, giải pháp CSS hoàn toàn này được khuyến nghị:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Bạn cần đặt bàn widthngay cả trong giải pháp của haunter . Nếu không thì nó không hoạt động.
Ngoài ra một tính năng CSS3 mới mà vsync đề xuất là : word-break:break-all;. Điều này sẽ phá vỡ các từ không có khoảng trắng trong chúng thành nhiều dòng quá. Chỉ cần sửa đổi mã như thế này:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Kết quả cuối cùng

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Tôi đã có một ô td bảng dài, điều này buộc bảng vào các cạnh của trình duyệt và trông xấu xí. Tôi chỉ muốn cột đó chỉ có kích thước cố định và ngắt các từ khi nó đạt đến chiều rộng được chỉ định. Vì vậy, điều này làm việc tốt cho tôi:

<td><div style='width: 150px;'>Text to break here</div></td>

Bạn không cần chỉ định bất kỳ loại kiểu nào cho bảng, phần tử tr. Bạn cũng có thể sử dụng overflow: hidden; như được đề xuất bởi các câu trả lời khác nhưng nó làm cho văn bản thừa biến mất.

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10h10

cho bảng chiều rộng FULLSCREEN:

• chiều rộng bảng PHẢI là 100%

• nếu cần N colunms, thì THs phải là N + 1

ví dụ cho 3 cột:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: con đầu lòng ...: con thứ n (1) hoặc ...