Đặt độ rộng cột của bảng không đổi bất kể số lượng văn bản trong các ô của nó là bao nhiêu?

Trong bảng của tôi, tôi đặt chiều rộng của ô đầu tiên trong một cột là 100px.
Tuy nhiên, khi văn bản trong một ô trong cột này quá dài, chiều rộng của cột trở nên nhiều hơn 100px. Làm thế nào tôi có thể vô hiệu hóa bản mở rộng này?

Tôi chơi với nó một chút vì tôi gặp khó khăn khi tìm ra nó.

Bạn cần đặt chiều rộng ô ( thhoặc tdđã hoạt động, tôi đặt cả hai) VÀ đặt table-layoutthànhfixed . Vì một số lý do, chiều rộng của ô dường như chỉ cố định nếu độ rộng của bảng cũng được đặt (tôi nghĩ đó là ngớ ngẩn nhưng whatev).

Ngoài ra, rất hữu ích khi đặt thuộc overflowtính hiddenđể ngăn bất kỳ văn bản bổ sung nào ra khỏi bảng.

Bạn cũng nên đảm bảo để lại tất cả các viền và kích thước cho CSS.

Ok đây là những gì tôi có:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Đây là trong JSFiddle

Anh chàng này có một vấn đề tương tự: Chiều rộng ô bảng - sửa chiều rộng, gói / cắt các từ dài

Xem: http://www.html5-tutorials.org/tables/changing-column- thong/

Sau thẻ bảng, sử dụng phần tử col. bạn không cần một thẻ đóng.

Ví dụ: nếu bạn có ba cột:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Chỉ cần thêm <div>thẻ bên trong <td>hoặc <th>xác định chiều rộng bên trong<div> . Điều này sẽ giúp bạn. Không có gì khác làm việc.

ví dụ.

<td><div style="width: 50px" >...............</div></td>

Nếu bạn cần thêm một cột có chiều rộng cố định trong khi các cột khác sẽ thay đổi kích thước, hãy thử đặt cả hai min-widthvà max-widthvề cùng một giá trị.

Bạn cần viết cái này bên trong CSS tương ứng

table-layout:fixed;

Những gì tôi làm là:

1. Đặt chiều rộng td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Đặt chiều rộng td với CSS:

   <td style="width:200px; height:50px;">

3. Đặt lại chiều rộng là tối đa và tối thiểu với CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Nghe có vẻ hơi lặp đi lặp lại nhưng nó mang lại cho tôi kết quả mong muốn. Để đạt được điều này một cách dễ dàng, bạn có thể cần đặt các giá trị CSS trong một lớp trong biểu định kiểu của mình:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

sau đó:

<td class="td_size">

Đặt thuộc tính lớp cho bất kỳ <td>bạn muốn.

Tôi đã sử dụng cái này

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Nếu bạn không muốn bố trí cố định, chỉ định một lớp cho cột có kích thước phù hợp.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Nó cũng giúp, để đặt vào "ô điền" cuối cùng, với width: auto . Điều này sẽ chiếm không gian còn lại và sẽ để lại tất cả các kích thước khác theo quy định.

Làm cho câu trả lời được chấp nhận trả lời cho màn hình nhỏ khi nhỏ hơn chiều rộng cố định.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

Fiddle

https://jsfiddle.net/w9s3ebzt/

Cài đặt này:

style="min-width:100px;" 

Đã làm cho tôi.

KAsun có ý tưởng đúng. Đây là mã chính xác ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Theo câu trả lời của tôi ở đây , cũng có thể sử dụng đầu bàn (có thể để trống) và áp dụng độ rộng tương đối cho mỗi ô của đầu bảng. Độ rộng của tất cả các ô trong thân bảng sẽ phù hợp với chiều rộng của đầu cột của chúng. Thí dụ:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Xem kết quả

Ngoài ra, sử dụng colgroupnhư được đề xuất trong câu trả lời của Hyathin.

Tôi sử dụng một phần tử :: sau trong ô nơi tôi muốn đặt chiều rộng tối thiểu bất kể văn bản có mặt như thế nào:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Tôi không phải đặt chiều rộng trên bảng cha mẹ cũng như không sử dụng bố trí bảng.

Tôi thấy câu trả lời của KAsun hoạt động tốt hơn bằng cách sử dụng vw thay vì px như vậy:

<td><div style="width: 10vw" >...............</div></td>

Đây là kiểu dáng duy nhất tôi cần để điều chỉnh độ rộng cột

Bạn không cần đặt "fixed"- tất cả những gì bạn cần là đặt overflow:hiddenvì độ rộng cột được đặt.