如何使 div 和 table 与 a 中的文本大小相同？

Question

如何使内部 table 与内部文本大小相同 :

<table class="table-1">
        <tr>
            <td align="center">
                <div class="block" id="block-1" style="background: black">
                    <a style="color: black" href="myFunc()"><c:out
                            value="${item.title}" /></a>
                </div>
            </td>
        </tr>
</table>

css:

table.table-1 {
    width: 100%;
}

如何使 <div class="block" id="block-1" style="background: black"> 的尺寸变为

<a style="color: black" href="myFunc()"> <c:out value="${item.title}"/> </a>

Answer 1

对.block

使用display: inline-block;

table.table-1 {
    width: 100%;
}
.block{
    display: inline-block;    
}

<table class="table-1">
        <tr>
            <td align="center">
                <div class="block" id="block-1" style="background: black">
                    <a style="color: #fff" href="myFunc()">text text text</a>
                </div>
            </td>
        </tr>
</table>

如何使 div 和 table 与 a 中的文本大小相同？

How to make div inside table same size as text inside a?

html

css

styling