Detail Form

  • 디테일 영역의 Default 구조는 3열입니다.
  • Label 의 기본 글자수는 1~9자이며, 10~12자 시 180px, 13~16자 210px, 30px씩 증가합니다.
  • 입력값이 긴경우 예외적으로 2 cell, 3 cell을 병합하여 사용합니다.
  • resizing 시 Label 영역은 고정되며, 입력 영역이 가변됩니다.

Default Detail Form

가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
 
          
    <table class="table is-form">
      <colgroup>
        <col style="width:15rem;">
        <col style="width:auto;">
        <col style="width:15rem;">
        <col style="width:auto;">
        <col style="width:15rem;">
        <col style="width:auto;">
      </colgroup>
      <tbody>
        <tr>
          <th><div class="is-requirement">가나다라마바사아자</div></th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" placeholder="null text">
            </div>
          </td>
          <th><div class="is-requirement">가나다라마바사아자</div></th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" placeholder="null text">
            </div>
          </td>
          <th><div class="is-requirement">가나다라마바사아자</div></th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" placeholder="null text">
            </div>
          </td>
        </tr>
      </tbody>
    </table>

Detail Form : 입력값이 긴경우

  • 디테일 내 보조문구가 필요할 경우 툴팁을 활용합니다.
가나다라
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자
가나다라마바사아자 
          
    <table class="table is-form">
      <colgroup>
        <col style="width:15rem;">
        <col style="width:auto;">
        <col style="width:15rem;">
        <col style="width:auto;">
      </colgroup>
      <tbody>
        <tr>
          <th>
            <div class="is-requirement">가나다라</div>
          </th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
            </div>
          </td>
          <th>가나다라마바사아자</th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
            </div>
          </td>
        </tr>
        <tr>
          <th>가나다라마바사아자</th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
            </div>
          </td>
          <th>가나다라마바사아자</th>
          <td>
            <div class="formControl">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
            </div>
          </td>
        </tr>
        <tr>
          <th>가나다라마바사아자</th>
          <td colspan="3">
            <div class="formControl">
              <input type="text" class="form__input" style="width:17rem;" placeholder="null text">
              <input type="text" class="form__input" style="width:calc(100% - 42rem);" placeholder="null text">
              <button class="btn is-primary">버튼명</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

Detail Form : 가로형 header 2단

구분1 구분2 구분3
구분 구분 구분 구분 구분 구분
텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 
          
    <table class="table text-center">
      <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th colspan="2">구분1</th>
          <th colspan="3">구분2</th>
          <th>구분3</th>
        </tr>
        <tr class="is-lightGray">
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
        </tr>
      </tbody>
    </table>

Detail Form : 가로형 header 3단

구분 구분2
구분1 구분2 구분3 구분4
구분 구분 구분 구분 구분 구분 구분
텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 
          
    <table class="table text-center">
      <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th colspan="2">구분</th>
          <th colspan="5">구분2</th>
        </tr>
        <tr>
          <th colspan="2">구분1</th>
          <th colspan="2">구분2</th>
          <th colspan="2">구분3</th>
          <th>구분4</th>
        </tr>
        <tr class="is-lightGray">
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
          <th>구분</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
          <td>텍스트</td>
        </tr>
      </tbody>
    </table>

Detail Form : 혼합형 header

구분 대상 일수 비고
출산 배우자 출산휴가 10 배우자 출산휴가(10일) 유급휴가임
출산 전, 후 휴가 90
재해 수재, 화재 등 중대 재해 3
재해 수재, 화재 등 중대 재해 3 
          
    <table class="table text-center">
      <colgroup>
        <col style="width:10rem;">
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>구분</th>
          <th>대상</th>
          <th>일수</th>
          <th>비고</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2">출산</th>
          <td>배우자 출산휴가</td>
          <td>10</td>
          <td rowspan="2">배우자 출산휴가(10일) 유급휴가임</td>
        </tr>
        <tr>
          <td>출산 전, 후 휴가</td>
          <td>90</td>
        </tr>
        <tr>
          <th>재해</th>
          <td>수재, 화재 등 중대 재해</td>
          <td>3</td>
          <td></td>
        </tr>
        <tr>
          <th>재해</th>
          <td>수재, 화재 등 중대 재해</td>
          <td>3</td>
          <td></td>
        </tr>
      </tbody>
    </table>