Question

我需要在<a>标记内放置<th>标记，以获取th的所有宽度

<table>
    <th style="width:200px; height: 200px; border: 1px solid black">
        <a style="border: 1px solid black; width:100%; height: 100%">
        </a>
    </th>
</table>

但它不起作用。

我无法更改标记结构，只应用样式，因为它是由UI框架生成的。

jsFiddle

Answer 1

将display: block;添加到代码：JS Fiddle

Answer 2

你可以这样做：

＆＃13;

th {
    width:200px;
    height: 200px;
    border: 1px solid black;
    position:relative;
}
a {
    border: 1px solid black;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

＆＃13;

<table>
    <th> <a></a>

    </th>
</table>

＆＃13;

修改

好的，基本上这就是正在发生的事情。默认情况下，元素为position: static。这是默认行为，元素设置为其在流中的当前位置。


static 此关键字允许元素使用正常行为，即   它被布置在流程中的当前位置。顶部，右边，   bottom，left和z-index属性不适用。

将其更改为position: relative，我无法解释它比Mozilla更好：


relative 此关键字列出所有元素，就好像元素不是   定位，然后调整元素的位置，而不改变   布局（从而为元素留下一个空隙   如果没有定位的话。）

将父元素更改为position: relative然后我们可以将子元素更改为position: absolute（并使其工作）

position:absolute表示该元素不会占用文档中的空间。根据其最接近的祖先（在这种情况下，父母）
定位

绝对不要为元素留出空间。相反，将它定位在   指定位置相对于其最近位置的祖先或   包含块。绝对定位的盒子可以有边距，   它们不会随着任何其他边缘而崩溃。

聚集于：https://developer.mozilla.org/en-US/docs/Web/CSS/position

使标签占据其容器的所有宽度和高度

2 个答案: