Cals table styling

У меня есть таблица HTML ниже (таблица cals), здесь мне нужен CSS, который показывает результат, как на скриншоте (часть границ).Cals table styling

<div class="para">To the Commissioner for Labour</div> 
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4"> 
    <colgroup> 
     <col class="colname-c1 colwidth-25.00%"></col> 
     <col class="colname-c2 colwidth-25.00%"></col> 
     <col class="colname-c3 colwidth-25.00%"></col> 
     <col class="colname-c4 colwidth-25.00%"></col> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td colspan="4" align=""> 
       I declare that the information given in this form is, to the 
       best of my knowledge, true and accurate.Signature: ___________ 
       (for and on behalf of the employer)Name (in block letters): ____ 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Position:</div> 
      </td> 
      <td> 
       <div class="para">□ Sole proprietor</div> 
      </td> 
      <td> 
       <div class="para">□ Partner</div> 
      </td> 
      <td> 
       <div class="para"></div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para"></div> 
      </td> 
      <td> 
       <div class="para">□ Manager</div> 
      </td> 
      <td> 
       <div class="para">□ Officer</div> 
      </td> 
      <td> 
       <div class="para"></div> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" align="">Date: __________________________</td> 
      <td> 
       <div class="para"></div> 
      </td> 
      <td> 
       <div class="para">__________________________________</div> 
       <div class="para">Chop of Company <span class="font-style-bolditalic">(Note 1)</span> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="para align-center"><span class="font-style-bold">Part I</span></div> 
<div class="para"> <span class="font-style-italic">A. Particulars of the employee</span> 

</div> 
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4"> 
    <colgroup> 
     <col class="colname-c1 colwidth-25.00%"></col> 
     <col class="colname-c2 colwidth-25.00%"></col> 
     <col class="colname-c3 colwidth-25.00%"></col> 
     <col class="colname-c4 colwidth-25.00%"></col> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td colspan="3" align="">Name of employee (Surname first)</td> 
      <td> 
       <div class="para">Identity Card/Passport No.</div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Telephone No.</div> 
      </td> 
      <td> 
       <div class="para">Fax No.</div> 
      </td> 
      <td colspan="2" align="">Address</td> 
     </tr> 
     <tr> 
      <td> 
       <div class="para">Date of birth</div> 
       <div class="para">_____/_____/____</div> 
       <div class="para">Day/Month/Year</div> 
      </td> 
      <td> 
       <div class="para">Sex</div> 
       <div class="para">□ Male&nbsp;&nbsp;□ Female</div> 
      </td> 
      <td> 
       <div class="para">Occupation</div> 
      </td> 
      <td> 
       <div class="para">An apprentice</div> 
       <div class="para">□ Yes&nbsp;&nbsp;□ No</div> 
      </td> 
     </tr> 
    </tbody> 
</table>

ожидаемые и токовые выходы, как показано ниже

Current: Current

Ожидаемое: Expected

Благодаря

источник

2013-12-09 user2423959

Вы можете поделиться с вами тем, что вы искали? – TreeTree

Пожалуйста, поделитесь с нами CSS –

Для отображения границы вокруг таблицы:

table { 
    border: 1px solid; 
}

К предотвращать границы вокруг ячеек (td):

table td { 
    border: none; 
}

Чтобы выровнять текст по левому краю и добавить некоторые интервалы:

table td { 
    padding: 3px; 
    text-align: left; 
}

Вы можете укладывать вторую таблицу на основе примера я привел для первого.

Пример: http://jsfiddle.net/KTZL6/1

Это, однако, является очень простой CSS. Вы, вероятно, лучше всего работаете над учебником, например, http://www.cssbasics.com/introduction-to-css/, чтобы понять его.

источник

2013-12-09 15:33:33

Привет @mritz здесь, если вы видите первый случай (1 и 3 фото), есть только внешняя граница, это то, чего я хочу достичь. Спасибо за ответ – user2423959

Теперь это еще проще. См. Обновленный ответ. –

Спасибо @mritz_p, вот и возникла настоящая проблема, когда я добавляю вторую таблицу здесь, она показывает оба с только границами, где, как я хочу один с brders, а другой без границ, извините, я обновил вашу скрипку. – user2423959

Если я понимаю правильно, вы хотите удалить только границы.

<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4" border="0">

Вы можете использовать границу = "0", нет необходимости и внешний CSS-файл

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none для других свойств

источник

2013-12-09 15:32:43 MustafaP

Привет @ user2688655: здесь, если вы видите первый случай (1 и 3 фото), есть только внешняя граница, это то, чего я хочу достичь. Спасибо за ответ – user2423959

Cals table styling

ответ

Смежные вопросы