Colspan trên ô trong một hàng dường như ngăn chặn thiết lập chiều rộng TD trong tất cả các hàng khác. Tại sao?

Tôi muốn tạo ra một bảng mà trông như thế này:Colspan trên ô trong một hàng dường như ngăn chặn thiết lập chiều rộng TD trong tất cả các hàng khác. Tại sao?

+-----------------------------------------------------------+ 
|January 12th, 2012           | 
+-----------------------------------------------------------+ 
| x | first item     | second item    | 
+-----------------------------------------------------------+ 
| x | first item     | second item    | 
+-----------------------------------------------------------+ 
|January 13th, 2012           | 
+-----------------------------------------------------------+ 
| x | first item     | second item    | 
+-----------------------------------------------------------+ 
| x | first item     | second item    | 
+-----------------------------------------------------------+

nhưng những gì tôi có được điều này là:

+-----------------------------------------------------------+ 
|January 12th, 2012           | 
+-----------------------------------------------------------+ 
| x   | first item   | second item   | 
+-----------------------------------------------------------+ 
| x   | first item   | second item   | 
+-----------------------------------------------------------+ 
|January 13th, 2012           | 
+-----------------------------------------------------------+ 
| x   | first item   | second item   | 
+-----------------------------------------------------------+ 
| x   | first item   | second item   | 
+-----------------------------------------------------------+

Các 'x' là thực sự là một hình ảnh có chiều rộng cố định. Tôi muốn ép ô đầu tiên chỉ rộng bằng hình ảnh.

Đây là một mẫu:

<html> 
    <body> 
     <table> 
      <tbody> 
       <tr> 
        <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td> 
       </tr> 
       <tr> 
        <td width="20"> x </td> 
        <td>First item</td> 
        <td>Second item</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

Dường như hàng chứa TD với colspan = 3 đang gây ra TD trong các hàng khác để bỏ qua các thuộc tính chiều rộng (Tôi cũng đã cố gắng sử dụng rộng phong cách: 20px)

Kết xuất chính xác trong FF8. Bất kỳ ý tưởng làm thế nào để tôi nhận được IE để render bảng theo cách tôi muốn?

Nguồn

2012-01-12 paul

Strange, những gì bạn đang làm có vẻ đúng. Tôi đã sao chép mã HTML của bạn và nó hoạt động tốt cho tôi. Bạn đã thử sử dụng Firebug để kiểm tra xem có phải có một số kiểu dáng mà bạn không biết? –

@Lex - bạn nói đúng. Tôi chỉ cần sao chép nó trở lại và có vẻ ok trong FF. Vẫn hút trong IE mặc dù! – paul

Chiều rộng tổng thể của bảng và chiều rộng hai cột khác phải là động hay chúng có thể được sửa? –

Tôi đã quên rằng bảng có phong cách 'table-layout: fixed' và điều này đã gây ra những khó khăn. Khi kiểu này được đặt, độ rộng của các ô trong hàng đầu tiên được áp dụng cho tất cả các hàng sau. Khi hàng đầu tiên chứa một colspan tôi đoán IE đã nhầm lẫn (FF xử lý nó ok).

Bất kỳ cách nào nó không linh hoạt như tôi muốn nhưng điều này làm việc cho tôi.

<html> 
    <body> 
    <div style="width:350px; border:blue 1px solid"> 
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;"> 
     <tr> 
     <td style="width:17px;"/> 
     <td style="width:20px;"/> 
     <td style="width:180px;"/> 
     <td style="width:130px;"/> 
     </tr> 
     <tr> 
     <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td> 
     </tr> 
     <tr title="09 January 2012"> 
     <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td> 
     <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td> 
     <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td> 
     <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

Nguồn

2012-01-13 10:01:12 paul

Cảm ơn lòng tốt Tôi đọc này .. tôi sẽ không bao giờ đoán được điều đó. Tôi nghĩ rằng cố định có nghĩa là "lắng nghe phong cách của tôi!" – carinlynchin

Tôi không thể upvote đủ. –

IE luôn xử lý chiều rộng trên các ô bảng dưới dạng chiều rộng tối thiểu, ít nhất là lên đến phiên bản 8 (không biết khoảng 9).

Cách duy nhất tôi tìm thấy là chỉ định chiều rộng rõ ràng trên tất cả các ô của bảng hoặc sử dụng Javascript để đặt chiều rộng sau khi tải (nhưng trước khi hiển thị).

Nguồn

2012-01-12 16:00:51

-1

tôi sẽ đề nghị đưa ra những tế bào một lớp và sau đó phong cách với

<style>  
.td_class {width: 20px;} 
</style>

Nguồn

2012-01-12 16:15:18

chỉ cần đọc mà bạn đã thử này ... Lạ, nó làm việc cho tôi. đề nghị khác duy nhất của tôi sẽ là để xác định chiều rộng tổng thể của bảng –

Như tìm thấy trong this answer bạn có thể thiết lập thuộc tính cho toàn bộ bảng qua colgroup và col. Bằng cách đó bạn có thể thiết lập các thuộc tính riêng biệt ngay cả đối với các ô (vô hình đơn) bên trong colspan ở hàng đầu tiên.

Trong ví dụ của bạn nó sẽ là:

<table> 
    <colgroup> 
    <col width="20" /> 
    <col /> 
    <col /> 
    </colgroup> 
    <tbody> 
    <tr> 
     <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td> 
    </tr> 
    <tr> 
     <td> x </td> 
     <td>First item</td> 
     <td>Second item</td> 
    </tr> 
    </tbody> 
</table>

Dưới đây là một fiddle

Nguồn

2016-02-08 16:07:35 phils

rock on. cảm ơn bạn. – catbadger

Tôi gặp vấn đề tương tự. Đây là thứ duy nhất giải quyết nó cho tôi. – Allison

Colspan trên ô trong một hàng dường như ngăn chặn thiết lập chiều rộng TD trong tất cả các hàng khác. Tại sao?

Trả lời

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