如何将<div>放在表格标签中？

debugcn 发表于 Dev

海西

像这样：

<td align="center" width="352" valign="middle" bgcolor="#ffffff" c-style="whiteBG" 
<div="" class="sortable_inner ui-sortable" style="background-color: rgb(255, 255, 255);"
>
...
</td>

我在网站上看到此文件运行正常，在某些地方它可以运行，但在其他地方却不行。div标签在td标签内如何？

爱德华多

HTML表格内的Divs是可能的，但它们必须位于表格单元格内，这也意味着如果将它们放在td或th内，它们也将起作用，因为这两个嵌套在单元格内。

您需要做的就是将div嵌套在th或td内，在您的示例中，您仅使用td。另外，您还有一些我已更正的HTML语法错误。希望对您有所帮助，我添加了一个使用CSS Grid的示例。

<table border=1 width=200 cellpadding=10>
<tr>
<td align="center" width="352" valign="middle" bgcolor="#ffffff" c-style="whiteBG">
 <div class="sortable_inner ui-sortable" style="background-color: rgb(255, 255, 255);">

<p> Your content goes here </p> 

</div> <!-- Div ends here -->

</td> <!-- Table cell ends here -->
</tr> <!-- Table row ends here -->
</table> <!-- Table element ends here -->

在表格和CSS网格内使用div元素

    <style>
        tr {
            background-color: blue;
            height: 377px;
            width: 377px;
        }
        #div {
            background-color: black;
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr;
        }        
        p {
            color: white;
        }
    </style>
</head>

<body>
    <table width=200 cellpadding=10>
        <tr>
            <td>
                <div id="div">
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil enim dicta quasi? Perferendis rerum quas a dicta aperiam in ipsa voluptates at ipsum, ratione alias veritatis repellat dolore doloremque magnam. </p>
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus temporibus velit! </p> 
                </div> <!-- Div ends here -->
        </td> <!-- Table cell ends here -->
    </tr> <!-- Table row ends here -->
    </table>
    </body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。