как установить столбец (<td>) ширина с использованием значения td в таблице

Question

Я хочу установить td width, используя значение 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 является квалификацией, тогда width = "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