Question

我有以下HTML代码。

    <div class="main">  
    <div class="para">
                    <a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
                    are scandalous or vexacious or have been initiated maliciously or for an ulterior
                    motive may not only be struck out, the petitioner may also face an order to pay
                    costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
                        Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
                            China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
                    <span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
                    [1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
                    the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
                    determination of disputes between parties.
                </div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
                    <colgroup>
                        <col class="colname-c1 colwidth-8.80%"></col>
                        <col class="colname-c2 colwidth-12.68%"></col>
                        <col class="colname-c3 colwidth-59.33%"></col>
                        <col class="colname-c3 colwidth-19.19%"></col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td class="null"><div class="para"><a name="I1-89"></a>
                                    <span class="phrase">I1/89</span>&nbsp;&nbsp;&nbsp;
                                </div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">Stages of a voluntary arrangement</span>
                                </div>
                            </td>
                            <td rowspan="align-center">
                                <div class="para">
                                    <span class="font-style-bold">Procedures</span>
                                </div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="null"><div class="para"><a name="I1-89A"></a>
                                    <span class="phrase">I1/89A</span>
                                </div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">Debtor prepares proposal</span>
                                </div>
                            </td>
                            <td>
                                <div class="para">The proposal should include:</div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">BR 122B and C</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="null"><div class="para"><a name="I1-89B"></a>
                                    <span class="phrase">I1/89B</span>
                                </div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">Notice to intended nominee</span>
                                </div>
                            </td>
                            <td>
                                <div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
                            </td>
                            <td>
                                <div class="para">
                                    <span class="font-style-bold">BR 122D BFR 167 </span>
                                    <span class="font-style-italic">[Notice to Intended Nominee]</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style1">
                                <div class="para">
                                    <a name="I1-89C"></a>
                                    <span class="phrase">I1/89C</span>
                                </div>
                            </td>
                            <td class="auto-style1">
                                <div class="para">
                                    <span class="font-style-bold">Application for an interim order</span>
                                </div>
                            </td>
                            <td class="auto-style1">
                                <div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
                            </td>
                            <td class="auto-style1">
                                <div class="para">
                                    <span class="font-style-bold">BO 20A BFR 165 </span>
                                    <span class="font-style-italic">[Application for Interim Order]</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="null"><div class="para"></div>
                            </td>
                            <td class="null"><div class="para"></div>
                            </td>
                            <td>
                                <div class="para">An application for an interim order may be made by:</div>
                            </td>
                            <td class="null"><div class="para"></div>
                            </td>
                        </tr>
      </tbody>
      </table>
</div>

这里，我想通过使用css属性隐藏第一个单元格，并将表格第一个单元格中的数字设置为等于上面的数字。请参考以下屏幕截图。数字开始之间有一个间隙，还有一个额外的单元格（我给它的类为'null'），应隐藏它请参考我的第二个屏幕截图。请告诉我如何才能做到这一点。

JsFiddle是here

enter image description here

Answer 1

你可以像这样修改你的CSS：

.main{
margin-left: 5.0em;
margin-right: 0.2em;
}

table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}


.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}


td.null {
border:none; !important
}

.para span.phrase {
text-indent: 0em;
font-weight: bold;
}

你可能需要一些“调整”，但它似乎是你需要的。

填充属性导致第一行和日期之间的差距，同样，我使用“border：none;”在第一列上隐藏日期周围的边框。（它存在，但你没有看到它）

我希望它可以帮助你，

祝你好运

合并单元格并向左对齐

1 个答案: