将td拆分为三个部分

时间:2013-12-30 11:18:04

标签: javascript html

您好我使用以下代码段来创建表。在此我想将第一列(<td>)分成三个不同的部分

<body>
    <div class="minus">
        <table cellpadding="0.25px">
            <tr>
                <td>
                    <div>
                        <div  style='height:1px; float:left; width:24px'></div>
                        <div class='e-gridtreeexpand'></div>
                        <div style='float: left;width:10px;height:1px;'></div>
                        <div class='e-cell'> Row 1 Col 0 </div>
                    </div>
                </td>
                <td>Row 0 Col 1</td>
            </tr>
            <tr><td>Row 1 Col 0</td><td>Row 1 Col 1</td></tr>
            <tr><td>Row 2 Col 0</td><td>Row 2 Col 1</td></tr>
            <tr><td>Row 3 Col 0</td><td>Row 3 Col 1</td></tr>
            <tr><td>Row 4 Col 0</td><td>Row 4 Col 1</td></tr>

        </table>
    </div>

    <style type="text/css">
        td {
            border: 1px solid black;
        }
        .e-gridtreeexpand {
            width: 0;
            height: 0;
            border-bottom: 10px solid black;
            border-left: 10px solid transparent;
            float: left;
        }
    </style>
</body>

在上面的代码工作正常。在我的工作场景中,我想替换<div>.e-cell)进行编辑,但它无法正常工作。它将占据整个<td>而不是.e-cell。如何解决这个问题

0 个答案:

没有答案