Sử dụng CSS td width tuyệt đối, vị trí

Vui lòng xem JSFIDDLE này

td.rhead { width: 300px; }

Tại sao chiều rộng CSS không hoạt động?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Ngoài ra, những ảnh hưởng của vị trí: cố định, tuyệt đối, v.v. có trên độ rộng td nếu có? Tôi đang tìm kiếm một lý do nhiều hơn là một giải pháp. Tôi hy vọng sẽ hiểu cách nó hoạt động.

Đây có thể không phải là điều bạn muốn nghe, nhưng display: table-cellkhông tôn trọng chiều rộng và sẽ được thu gọn dựa trên chiều rộng của toàn bộ bảng. Bạn có thể giải quyết vấn đề này một cách dễ dàng chỉ bằng cách có một display: blockphần tử bên trong chính ô bảng có chiều rộng bạn chỉ định, ví dụ:

<td><div style="width: 300px;">wide</div></td>

Điều này sẽ không tạo ra nhiều khác biệt nếu <table>chính nó là position: fixedhoặc tuyệt đối bởi vì vị trí của các ô đều là tĩnh so với bảng.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

CHỈNH SỬA: Tôi không thể nhận tín dụng, nhưng như các nhận xét nói rằng bạn chỉ có thể sử dụng min-widththay vì widthtrên ô trong bảng.

Bạn nên sử dụng tốt hơn table-layout: fixed

Tự động là giá trị mặc định và với các bảng lớn có thể gây ra một chút độ trễ phía máy khách khi trình duyệt lặp qua nó để kiểm tra tất cả các kích thước có phù hợp không.

Đã sửa lỗi tốt hơn nhiều và hiển thị trang nhanh hơn. Cấu trúc của bảng phụ thuộc vào chiều rộng tổng thể của bảng và chiều rộng của mỗi cột.

Ở đây nó được áp dụng cho ví dụ ban đầu: JSFIDDLE , Bạn sẽ lưu ý rằng các cột còn lại bị nghiền nát và chồng lên nội dung của chúng. Chúng tôi có thể khắc phục điều đó bằng một số CSS khác (tất cả những gì tôi phải làm là thêm một lớp vào TR đầu tiên):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Đã thấy hành động ở đây: JSFIDDLE

Lý do nó không hoạt động trong liên kết mà bạn đã cung cấp là vì bạn đang cố gắng hiển thị một cột 300px CỘNG 52 cột, mỗi cột kéo dài 7 cột. Thu hẹp số lượng cột và nó hoạt động. Bạn không thể phù hợp với nhiều thứ đó trên màn hình.

Nếu bạn muốn buộc các cột vừa khít, hãy thử cài đặt:

body {min-width:4150px;}

xem jsfiddle của tôi: http://jsfiddle.net/Mkq8L/6/ @mike Tôi chưa thể bình luận.

Lý do là vì bạn đã không chỉ định chiều rộng của bảng và toàn bộ td của bạn bị tràn.

Ví dụ: tôi đã cung cấp cho bảng chiều rộng 5000px, tôi nghĩ sẽ phù hợp với yêu cầu của bạn.

table{
    width:5000px;
}

Đó là mã chính xác mà bạn đã cung cấp, mà tôi chỉ thêm vào chiều rộng bảng.

Tôi tin rằng những gì đang xảy ra là vì TD của bạn vượt quá chiều rộng bảng mặc định. Bạn có thể thấy, nếu bạn rút ra khoảng 45 td của mình trong mỗi tr, (tức là mã bạn đã cung cấp trong câu hỏi của mình, không phải jsfiddle) thì nó hoạt động chính xác.

Hãy thử nó hoạt động.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Thử sử dụng

table {
  table-layout: auto;
}

Nếu bạn sử dụng Bootstrap, lớp tablecó table-layout: fixed;theo mặc định.

Sử dụng thuộc tính bố cục bảng và giá trị "cố định" trên bảng của bạn.

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

Sau khi thiết lập toàn bộ chiều rộng của bảng, bây giờ bạn có thể thiết lập chiều rộng theo% của td.

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

Bạn có thể tìm hiểu thêm về trên liên kết này: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Giải pháp điên rồ của tôi.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Nếu chiều rộng bảng chẳng hạn là 100%, hãy thử sử dụng chiều rộng phần trăm trên td chẳng hạn như 20%.

Gói nội dung từ ô đầu tiên trong div, ví dụ như sau:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

Đây là một jsfiddle .

Bạn cũng có thể dùng:

.rhead {
    width:300px;
}

nhưng điều này sẽ chỉ xảy ra với một số trình duyệt, nếu tôi nhớ không nhầm thì IE8 không cho phép điều này. Trên tất cả, sẽ an toàn hơn nếu chỉ đặt width=""thuộc tính vào <td>chính nó.