Как сделать содержимое td заполнить весь родитель?

Question

Возможно ли, чтобы содержимое ячейки таблицы заполнило всю ячейку?

У меня есть простая форма, организованная в таблице, метки слева, входы справа, и я хочу, чтобы этикетки были «полноразмерными», поэтому пользователь имеет большую область с кликами. В настоящее время он должен щелкнуть точно по тексту метки, но ячейка таблицы намного больше, и было бы лучше, если бы ярлык был расширен.

<td> 
    <label for="id">Click here will focus the corresponding input</label> 
</td> 

Любые идеи?

Спасибо

Answer 1

Если вы имеете в виду только ширину родительского td, то вы можете установить label в display:block:

<table border="1" width="100%"> 
    <tr> 
     <td> 
      <label for="id">Click here will focus the corresponding input</label> 
     </td> 
    </tr> 
</table> 

td 
{ 
    background:pink; 
} 
td label 
{ 
    background:yellow; 
    display:block; 
} 

https://jsfiddle.net/kn5ypr96/

Если вам нужен ярлык для заполнения высоте и ширине, то требуется другой подход:

td 
{ 
    background:pink; 
    height:100px; 
} 
td label 
{ 
    background:yellow; 
    display:block; 
    height:100%; 
} 

заполнит высоту и ширину. https://jsfiddle.net/bL9nvxd0/