如何使用表中的td值設置列（​​）寬度

Question

我想使用td的值設置td寬度。我只是創建了一個動態表，您可以在下面看到。

<table> 
    <tr> 
     <td class="heading">Post Name</td> 
     <td class="heading">Number of Post Available</td> 
     <td class="heading">Age Limit</td> 
     <td class="heading">Qualification</td> 
    </tr> 
    <tr> 
     <td>Junior Engineer</td> 
     <td>50</td> 
     <td>21-30</td> 
     <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
    </tr> 
</table> 

我不知道哪個值的形式來mysql的表，有時表的結構改變這樣的...

<table> 
    <tr> 
     <td class="heading">Post Name</td> 
     <td class="heading">Number of Post Available</td> 
     <td class="heading"></td> 
     <td class="heading">Qualification</td> 
    </tr> 
    <tr> 
     <td>Junior Engineer</td> 
     <td>50</td> 
     <td></td> 
     <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
    </tr> 
</table> 

所以，我想改變TD的寬度使用td值，例如..

如果td的值爲限定，那麼寬度=「40％」，否則如果該值爲年齡，則設置寬度爲10％。

我不知道是否有可能。

Answer 1

你有你如何能接近這幾個不同的選項取決於您使用標記的靈活性。

以表標題

的優勢，如果你可以調整現有的標記/格式，你可以考慮使用表格的標題，並應用適當的寬度以這些（直接或通過CSS樣式），而這些值將該列的子細胞內反映：

table .heading { 
 
    width: 10%; 
 
} 
 

 
table .qualification { 
 
    width: 40%; 
 
}

<table> 
 
    <tr> 
 
    <th class="heading">Post Name</th> 
 
    <th class="heading">Number of Post Available</th> 
 
    <th class="heading"></th> 
 
    <th class="heading qualification">Qualification</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Junior Engineer</td> 
 
    <td>50</td> 
 
    <td></td> 
 
    <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
 
    </tr> 
 
</table>

另外，使用這種方法，您可能會放棄「標題」樣式，而只需通過<th>元素對其進行樣式設置。

考慮CSS選擇

如果你的細胞的具體順序不會改變，你可以採取nth-child()選擇的優勢，只針對第四列，並使用之前選擇以定位其他所有元素：

table td { width: 10%; } 
table td:nth-child(4) { width: 40%; } 

table td { 
 
    width: 10%; 
 
} 
 

 
table td:nth-child(4) { 
 
    width: 40%; 
 
}

<table> 
 
    <tr> 
 
    <td class="heading">Post Name</td> 
 
    <td class="heading">Number of Post Available</td> 
 
    <td class="heading"></td> 
 
    <td class="heading">Qualification</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Junior Engineer</td> 
 
    <td>50</td> 
 
    <td></td> 
 
    <td>You must have BE/B.tech degree in computer science with minimum 60% marks</td> 
 
    </tr> 
 
</table>

Answer 2

正確的方法是使用th（表頭），而不是td標籤與它的width屬性：

<table> 
    <tr> 
    <th width="70%">Month</th> 
    <th width="30%">Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 

https://www.w3schools.com/tags/att_th_width.asp