2011-06-06 32 views
51

Vì vậy, tôi có một bảng với phong cách này:Bảng có bố cục bảng: cố định; và làm thế nào để làm cho một cột rộng hơn

table-layout: fixed; 

Mà làm cho tất cả các cột được chiều rộng tương tự. Tôi muốn có một cột (cột đầu tiên) rộng hơn và sau đó là các cột còn lại để chiếm chiều rộng còn lại của bảng với chiều rộng bằng nhau.

Làm cách nào để đạt được điều đó?

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    background: #ddd; 
 
    table-layout: fixed; 
 
} 
 

 
table th, table td { 
 
    border: 1px solid #000; 
 
} 
 

 
table td.wideRow, table th.wideRow { 
 
    width: 300px; 
 
}
<table class="CalendarReservationsBodyTable"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="97">Rezervovane auta</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="corner wideRow">Auto</th> 
 
     <th class="odd" colspan="4">0</th> 
 
     <th class="" colspan="4">1</th> 
 
     <th class="odd" colspan="4">2</th> 
 
     <th class="" colspan="4">3</th> 
 
     <th class="odd" colspan="4">4</th> 
 
     <th class="" colspan="4">5</th> 
 
     <th class="odd" colspan="4">6</th> 
 
     <th class="" colspan="4">7</th> 
 
     <th class="odd" colspan="4">8</th> 
 
     <th class="" colspan="4">9</th> 
 
     <th class="odd" colspan="4">10</th> 
 
     <th class="" colspan="4">11</th> 
 
     <th class="odd" colspan="4">12</th> 
 
     <th class="" colspan="4">13</th> 
 
     <th class="odd" colspan="4">14</th> 
 
     <th class="" colspan="4">15</th> 
 
     <th class="odd" colspan="4">16</th> 
 
     <th class="" colspan="4">17</th> 
 
     <th class="odd" colspan="4">18</th> 
 
     <th class="" colspan="4">19</th> 
 
     <th class="odd" colspan="4">20</th> 
 
     <th class="" colspan="4">21</th> 
 
     <th class="odd" colspan="4">22</th> 
 
     <th class="" colspan="4">23</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="alignRight wideRow">KE-260 FC - Octavia combi</td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td colspan="16" class="highlighted borderLeft" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td colspan="14" class="highlighted" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

jsfiddle: http://jsfiddle.net/6p9K3/

Thông báo cột đầu tiên, tôi muốn nó được 300px rộng.

Trả lời

54

Bạn chỉ có thể cung cấp cho các tế bào đầu tiên (do đó cột) có chiều rộng và có mặc định phần còn lại để auto

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
} 
 
td+td { 
 
    width: auto; 
 
}
<table> 
 
    <tr> 
 
    <td>150px</td> 
 
    <td>equal</td> 
 
    <td>equal</td> 
 
    </tr> 
 
</table>


hoặc cách khác là "cách thích hợp" để có được cột chiều rộng có thể sử dụng số điện thoại col element chính nó

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
} 
 
.wide { 
 
    width: 150px; 
 
}
<table> 
 
    <col span="1" class="wide"> 
 
    <tr> 
 
     <td>150px</td> 
 
     <td>equal</td> 
 
     <td>equal</td> 
 
    </tr> 
 
</table>

+0

Điều đó có hoạt động với bảng trong liên kết jsfiddle của tôi không? –

+0

yea dường như - chắc chắn kỹ thuật 'col' sẽ làm gì: ** [xem cập nhật fiddle] (http://jsfiddle.net/clairesuzy/HSVae/) - và với phương pháp colspan bạn có thể đi trên một cột khác độ rộng theo yêu cầu quá – clairesuzy

+7

Nếu bạn có một 'thead' chiều rộng nên được đặt trên nó' th' –

6

Bạn đang tạo một bảng rất lớn (hàng trăm hàng và cột)? Nếu vậy, là một ý kiến ​​hay, vì trình duyệt chỉ cần đọc hàng đầu tiên để tính toán và hiển thị toàn bộ table, vì vậy nó tải nhanh hơn.

Nhưng nếu không, tôi sẽ đề nghị bán phá giá và thay đổi css của bạn như sau:

table th, table td{ 
border: 1px solid #000; 
width:20px; //or something similar 
} 

table td.wideRow, table th.wideRow{ 
width: 300px; 
} 

http://jsfiddle.net/6p9K3/1/

+1

Điều đó không hoạt động bình thường. Nhìn vào 8,9,10,11 cột, chúng quá hẹp. –

+0

. Bạn có thể sửa lỗi đó bằng cách đặt nội dung trong 'td' kéo dài bốn' '' '' 'như vậy:'

Richard Knop
'Đặt' chiều rộng' thành tổng của tất cả 'td' riêng lẻ. Xem tại đây http://jsfiddle.net/6p9K3/2/ –

2

gì bạn có thể làm là một cái gì đó như thế này (giả):

<container table> 
    <tr> 
    <td> 
     <"300px" table> 
    <td> 
     <fixed layout table> 

Về cơ bản, chia bảng thành hai bảng và để bảng đó chứa một bảng khác.

+13

bảng lồng nhau là bảng tốt nhất – user1721135

25

Điều quan trọng của bố cục bảng: cố định là độ rộng cột được xác định bởi hàng đầu tiên của bảng.

Vì vậy

nếu cấu trúc bảng của bạn là như sau (cấu trúc bảng tiêu chuẩn)

<table> 
    <thead> 
     <tr> 
      <th> First column </th> 
      <th> Second column </th> 
      <th> Third column </th>   
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td> First column </td> 
      <td> Second column </td> 
      <td> Third column </td>   
     </tr> 
    </tbody> 

nếu bạn muốn cung cấp cho một chiều rộng tới cột thứ hai sau đó

<style> 
    table{ 
     table-layout:fixed; 
     width: 100%; 
    } 

    table tr th:nth-child(2){ 
     width: 60%; 
    } 

</style> 

Hãy nhìn rằng chúng tôi phong cách thứ không phải là td.

+3

Phong cách thứ cố định vấn đề của tôi, cảm ơn – Tim

+0

tuyệt vời tip- bảng thứ th: nth-con (4) –

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