如何设置列（ <td> ）宽度，使用表格中的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的值是资格，则width =“ 40％”，否则，如果值是age，则将宽度设置为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 （表头）代替带有其width属性的td标签：

<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