javascript - 如何使用表中的 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 的值为 qualification 则 width="40%"否则如果值为 age 则设置 width 10%.

不知道能不能。

Answer 1

根据您对标记的灵 active ，您有几种不同的选择来解决这个问题。

利用表格标题

如果您可以调整现有的标记/格式，您可以考虑使用表格标题并为其应用适当的宽度(直接或通过 CSS 样式)，这些值将反射(reflect)在该列的子单元格中:

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>