2014-01-28 97 views
0

我有下面的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属性来隐藏所述第一小区和设置在表等于在上述对位的数量第一小区的数量。请参考下面的截图。 数字开始之间还有一个空白,并且还有一个额外的单元格(为此我给了class为'null'),它应该隐藏请参阅我的第二个屏幕截图。请让我知道我该如何做到这一点。

的jsfiddle是here

enter image description here enter image description here

+0

'设置表格第一个单元格等于para'数不数有可能通过CSS ......你必须使用jquery/js! – NoobEditor

回答

0

可以modifie你的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;”在第一列上隐藏日期周围的边框。 (它存在,但你看不到它)

我希望它可以帮助你,

问候

+0

嗨托尼,当我申请上述css的数字是进入表格单元格,我不希望发生这种情况,数字应该是表格外。 – user2423959

+0

对不起,我已更新我的帖子以添加这个微妙。 – Tony