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的值是资格，则宽度=＆＃34; 40％＆＃34;或者如果值是年龄，则设置宽度为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

如何使用表中的td值设置column（）宽度

2 个答案: