1. Trang chủ
  2. Câu hỏi và trả lời
  3. chiều rộng td, không hoạt động?

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

2012-06-18 30 views
43

Vì vậy, tôi có mã này ở đây:chiều rộng td, không hoạt động?

<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ó ở mọi trình duyệt cả Mac và PC, nhưng ai đó đang phàn nàn rằng các td với các width của 200 tiếp tục thay đổi chiều rộng. Tôi không biết anh ấy đang nói gì. Có ai biết tại sao anh ta hay cô ta nhìn thấy sự thay đổi chiều rộng trên td?

Nguồn

2012-06-18 user979331

+0

Vậy làm thế nào chúng ta có thể giúp đỡ khi chúng ta thậm chí còn ít ý tưởng về những gì các khiếu nại về? Chúng tôi thậm chí không thể kiểm tra trang thực và chúng tôi không có thông tin về ai đó và môi trường duyệt web của họ. –

Trả lời

71

Nó nên là:

<td width="200">

hoặc

<td style="width: 200px">

Lưu ý rằng nếu di động của bạn có chứa một số nội dung không phù hợp với 200px (như somelongwordwithoutanyspaces), các tế bào sẽ kéo dài tuy nhiên, trừ khi CSS của bạn chứa table-layout: fixed cho bảng.

EDIT

Như kristina Childs lưu ý về câu trả lời của mình, bạn nên tránh cả width thuộc tính và sử dụng inline CSS (với thuộc tính style). Đó là một thực hành tốt để tách phong cách và cấu trúc càng nhiều càng tốt.

Nguồn

2012-06-18 20:28:56 bfavaretto

+0

Cảm ơn bfavaretto ... cố gắng rằng bây giờ – user979331

+28

nên bảng được '

' – user979331

+0

@ user1193385, Vâng, đó là nó. Nhưng tránh sử dụng css nội tuyến nếu có thể. – bfavaretto

4

Bạn không thể chỉ định các đơn vị trong các thuộc tính width/height 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.

Nguồn

2012-06-18 20:29:18 lanzz

17

Chiều rộng và/hoặc chiều cao trong bảng không còn tiêu chuẩn nữa; như Ianzz nói, họ không được chấp nhận. Thay vào đó, cách tốt nhất để làm điều này là để có một yếu tố ngăn chặn bên trong ô trong bảng của bạn mà sẽ giữ các tế bào mở để 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; 
}

Nguồn

2012-06-18 20:43:52

+4

Thật không may, công nghệ email là nhiều năm sau thông số HTML hiện tại, và trong trường hợp đó, các bảng và css nội tuyến thật đáng buồn, không thể tránh khỏi. – MikeTheLiar

+1

Không ai nói về email html, đây là để duyệt web cơ bản trên máy tính để bàn. Nhưng có, đối với các bảng email và css nội tuyến là cách duy nhất để xây dựng chúng. Cảm ơn, Microsoft ... –

+2

Tôi chỉ gửi email vì đó là những gì mang lại cho tôi ở đây; Tôi đã gặp vấn đề tương tự với email này. – MikeTheLiar

3

cố gắng sử dụng

word-wrap: break-word;

hy vọng sự trợ giúp này

Nguồn

2012-12-30 17:39:27 Med7at

0

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

<table> 
    <thead> 
     <tr width="25"> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
    <tr> 
     <td>Joe</td> 
     <td>[email protected]</td> 
    </tr> 
</table>

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

Nguồn

2014-03-28 05:44:10

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

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

Nguồn

2016-07-28 15:08:40 mateostabio

+1

Về trường hợp sử dụng của tôi, điều này quan trọng như câu trả lời của bfavaretto – brasofilo

0

thử điều này:

word-break: break-all;

Nguồn

2016-11-23 09:04:05

Các vấn đề liên quan

 Các vấn đề liên quan