2014-01-28 99 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