¿Cómo puedo obtener una etiqueta de anclaje para llenar el ancho de una celda de tabla?

Question

Tengo una celda de tabla con una etiqueta de anclaje y quiero que el ancho (y la altura) de la etiqueta de anclaje llenen el ancho de la celda de la tabla que lo contiene. La intuición no parece funcionar en esto. Por favor ayuda.

HTML:

<table> 
    <tr> 
     <td class="width_is_100px"> 
      <a href="http://www.doesnotwork.com"><span class="make_width_100px">Some Text</span></a> 
     </td> 
    </tr> 
</table> 

CSS: (no funciona)

.make_width_100px { 
    width:100px !important; 
} 

La etiqueta de anclaje es tan ancho como el texto "Algunos de texto". Quiero que el usuario pueda hacer clic en cualquier lugar dentro de la celda de la tabla y activar el enlace. No javascript por favor

Answer 1

Inténtelo:

a { 
    display: block; 
    height: 100%;   
    width: 100%; 
} 

Answer 2

Haga su elemento <a> un elemento de bloque (que es la línea por defecto):

.width_is_100px a { 
    display:block; 
} 

Answer 3

<table> 
    <tr> 
     <td class="width_is_100px"> 
      <a href="http://www.doesnotwork.com"><div style="width:100%;">Some Text</div></a> 
     </td> 
    </tr> 
</table> 

Answer 4

esto es probablemente demasiado tarde, pero, esto funcionó para mí en tablas con diferente altura de contenido

html

<table class="example"> 
    <tr> 
     <td><a href="">small content</a></td> 
     <td><a href="">multiline<br>content</a></td> 
    <tr> 
</table> 

css

table{ 
    padding:10px; /*for example*/ 
} 
table.example td{ 
    overflow:hidden; 
    padding:0px; /*you can need !important*/ 
} 
table.example a{ 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 10px 10px 500px 10px; /*table default padding except on bottom 500px for example*/ 
    margin-bottom: -490px; /*same as bottom padding - table padding*/ 
}