chiều rộng td, không hoạt động?

Vì vậy, tôi có mã này ở đây:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

với CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Nó hoạt động tốt trên trình duyệt của tôi và tôi đã thử nghiệm nó trên mọi trình duyệt, cả mac và PC, nhưng ai đó phàn nàn rằng tdvới width200 liên tục thay đổi chiều rộng. Tôi không biết anh ta đang nói về cái gì. Có ai biết tại sao anh ấy hoặc cô ấy thấy chiều rộng thay đổi trên tdkhông?

Nó phải là:

<td width="200">

hoặc là

<td style="width: 200px">

Lưu ý rằng nếu ô của bạn chứa một số nội dung không vừa với 200px (như somelongwordwithoutanyspaces), thì ô sẽ kéo dài, trừ khi CSS của bạn chứa table-layout: fixedcho bảng.

BIÊN TẬP

Như kristina con đã lưu ý trong câu trả lời của cô ấy, bạn nên tránh cả widththuộc tính và sử dụng CSS nội tuyến (có stylethuộc tính). Đó là một thực tiễn tốt để tách biệt phong cách và cấu trúc càng nhiều càng tốt.

Chiều rộng và / hoặc chiều cao trong bảng không còn là tiêu chuẩn nữa; như Ianzz nói, chúng không được dùng nữa. Thay vào đó, cách tốt nhất để làm điều này là có một phần tử khối bên trong ô bảng của bạn sẽ giữ ô mở theo kích thước mong muốn của bạn:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

Điều này sẽ buộc chiều rộng được tạo kiểu <td>. Nếu văn bản này lấp đầy nó, nó sẽ chồng lên <td>văn bản khác . Vì vậy, hãy thử sử dụng truy vấn phương tiện.

Bạn không thể chỉ định các đơn vị trong width/ heightthuộc tính của bảng; chúng luôn ở dạng pixel, nhưng bạn không nên sử dụng chúng vì chúng không được dùng nữa.

Bạn có thể thử "table-layout: fixed;" đến bàn của bạn

table-layout: fixed;
width: 150px;

150px hoặc chiều rộng mong muốn của bạn.

Tham khảo: https://css-tricks.com/fixing-tables-long-strings/

Bạn có thể sử dụng trong <td>thẻ css:display:inline-block

Giống: <td style="display:inline-block">

thử sử dụng

word-wrap: break-word;

hy vọng điều này giúp đỡ

thử đi:

word-break: break-all;

tôi sử dụng

<td nowrap="nowrap">

để ngăn chặn quấn Tham khảo: https://www.w3schools.com/tags/att_td_nowrap.asp

Lưu ý rằng việc điều chỉnh độ rộng của một cột trong phần sẽ ảnh hưởng đến toàn bộ bảng

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

Trong trường hợp của tôi, chiều rộng trên thead> tr đã ghi đè trực tiếp chiều rộng trên table> tr> td.

Sử dụng

<table style="table-layout:fixed;">

Nó sẽ buộc bảng đặt thành 100% chiều rộng. Sau đó, hãy sử dụng mã này

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(id bảng là dataTable và có 3 cột) để chỉ định độ dài cho mỗi ô

Tôi đã thử với nhiều giải pháp nhưng nó không hiệu quả với tôi vì vậy tôi đã thử uốn dẻo với bảng và nó hoạt động tốt với tôi với tất cả các chức năng của bảng như thu gọn đường viền và như vậy chỉ có thay đổi là thuộc tính hiển thị

Đây là yêu cầu HTML của tôi

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

CSS của tôi

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Vấn đề này khá dễ dàng giải quyết bằng cách sử dụng min-widthvà max-widthtrong một quy tắc css.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Điều này sẽ buộc cột đầu tiên phải rộng 80px. Thông thường, tôi chỉ sử dụng chiều rộng tối đa mà không có chiều rộng tối thiểu để thống trị trong văn bản đôi khi quá dài để tạo bảng có cột siêu rộng hầu như trống. Câu hỏi của OP là về việc thiết lập một chiều rộng cố định, do đó cả hai quy tắc với nhau. Trên nhiều trình duyệt width:80px;trong CSS bị bỏ qua cho các cột bảng. Đặt chiều rộng trong HTML hoạt động, nhưng không phải là cách bạn nên làm.

Tôi khuyên bạn nên sử dụng quy tắc chiều rộng tối thiểu và chiều rộng tối đa và không đặt chúng giống nhau mà nên đặt một phạm vi. Bằng cách này, bảng có thể làm được điều đó, nhưng bạn có thể cung cấp cho nó một số gợi ý về việc phải làm với nội dung quá dài.

Nếu tôi muốn giữ cho văn bản không bị bao bọc và tăng chiều cao của một hàng - nhưng vẫn giúp người dùng có thể xem toàn bộ văn bản, tôi sử dụng white-space: nowrap;trên quy tắc chính, sau đó áp dụng quy tắc di chuột loại bỏ quy tắc chiều rộng và ngay để người dùng có thể xem toàn bộ nội dung khi họ di chuột qua nội dung đó. Một cái gì đó như thế này:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Nó chỉ phụ thuộc vào chính xác những gì bạn đang cố gắng đạt được. Tôi hi vọng điêu nay se giup được ai đo. PS Ngoài ra, đối với iOS có một bản sửa lỗi cho di chuột không hoạt động - xem CSS Hover không hoạt động trên iOS Safari và Chrome