css - 如何为 div 中的所有内容添加边框

Question

我有一个包含 <tr><table> 的 div等等，当我尝试给它一个边框时，每个单元格都有一个边框工作。它没有给任何边界:

#dropDownDiv {
    border-left: thin solid white;
}

<div id="dropDownDiv">
<tr>
    <td style="text-transform:capitalize;">
        ${bean.multiLineAddress}${bean.postCode}
    </td>
    <td>
        <table border="0">
            <tr>
                <td>
                    Home
                </td>
                <td>
                    ${bean.phoneNumber}
                </td>
            </tr>
            <tr>
                <td>
                    Work
                </td>
                <td>
                    ${bean.phoneNumber_2}
                </td>
            </tr>
            <tr>
                <td>
                    Mobile
                </td>
                <td>
                    ${bean.mobilePhone}
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    ${bean.emailAddress}
                </td>
            </tr>
        </table>
    </td>
    <td>
        empty
    </td>
    <td>
        warning
    </td>
    <td Style="text-transform: capitalize;">
        {for warning in bean.Warnings}
        - ${warning}<br>
        {/for}
    </td>   
</tr>
</div>

编辑:所有答案均无效

Answer 1

您只选择了 div，您还必须选择 div 中的所有内容:

#dropDownDiv,
#dropDownDiv table,
#dropDownDiv tr,
#dropDownDiv td
{
    border-left: thin solid white;
}

或者您可以使用通配符:

#dropDownDiv *
{
    border-left: thin solid white;
}

这将绝对选择 div 中的所有内容 :)

---

刚抓到这个:

您缺少表格标签:

<div id="dropDownDiv">
<tr>
    <td style="text-transform:capitalize;">

将其更改为:

<div id="dropDownDiv">
<table>
<tr>
    <td style="text-transform:capitalize;">

你不能有 <tr>没有<table> .有些浏览器不知道如何处理它。 :)