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

Question

Vì vậy, tôi có một bảng với phong cách này:

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.

Answer 1

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>

Answer 2

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/

Answer 3

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.

Answer 4

Đ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.