상담문의 010-2343-0702

Home > 고객센터 > 자료실

자료실

자료실

css 테이블에 글씨가 한줄로 나오게 소스

  • 하나솔루션
  • 2018-05-09 12:22:56
  • hit1029
  • 222.118.131.37

- 화면이 작아졌을 때, 인증제 명, 대상, 일정 같은 부분의 내용이 두줄이 되면 보기 싫어져서 그런것 같네요.

- 해당 부분은 항상 한줄로 출력되도록 다음과 같이 추가하였습니다.

 

 

 

1. 제목 부분 CSS

- 한 줄로 출력되도록 white-space:nowrap; 을 추가하였습니다.

 

2. 내용 부분 CSS

- 한 줄로 출력되고 싶은 항목에만 적용되도록 .farm-A-nowrap {white-space:nowrap;} 을 추가하였습니다.

 

3. 내용 부분 HTML

- 한 줄로 출력되고 싶은 항목에 farm-A-nowrap class 를 추가하였습니다.

 

 

 

# css


    @media (min-width:768px){
        .farm-A-mobile {display:none;}
        .farm-A-tablet-pc {display:block;}

        .farm-A-table > colgroup > col.farm-A-tablet-pc {display:table-column;}
        .farm-A-table > thead.farm-A-tablet-pc-header-group {display: table-header-group;}
        .farm-A-table > thead > tr > th {font-size:13px;white-space:nowrap;}
        .farm-A-table > thead > tr > th.farm-A-tablet-pc {display:table-cell;}
        .farm-A-table > tbody > tr.farm-A-mobile {display:none;}
        .farm-A-table > tbody > tr > th, .farm-A-table > tbody > tr > td {font-size:13px;}
        .farm-A-table > tbody > tr > th.farm-A-tablet-pc, .farm-A-table > tbody > tr > td.farm-A-tablet-pc {display:table-cell;}
        .farm-A-table.farm-A-row > tbody > tr > th {display:table-cell; text-align:center;}
        .farm-A-table.farm-A-row > tbody > tr > td {display:table-cell;}

        .farm-A-btn-wrap a {margin-left:6px;}
        .farm-A-btn-wrap a:first-child {margin-left:0;}
        .farm-A-btn-wrap .farm-A-half {display:inline-block;}
        .farm-A-btn-wrap .farm-A-half a {float:none; width:auto;}
        .farm-A-btn-wrap .farm-A-half a:first-child {float:none; width:auto;}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle {}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-medium {width:70px;}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-big {width:110px;}

        .farm-A-btn-circle.farm-A-big {display:inline-block; width:110px; height:110px; padding:40px 0; border-radius:50%;}
      
        .farm-A-nowrap {white-space:nowrap;}
    }


    @media \0screen{
        .farm-A-mobile {display:none;}
        .farm-A-tablet-pc {display:block;}

        .farm-A-table > colgroup > col.farm-A-tablet-pc {display:table-column;}
        .farm-A-table > colgroup > col.farm-A-pc {display:table-column;}
        .farm-A-table > thead.farm-A-tablet-pc-header-group {display: table-header-group;}
        .farm-A-table > thead > tr.farm-A-mobile-tablet {display:none;}
        .farm-A-table > thead > tr > th {font-size:13px;white-space:nowrap;}
        .farm-A-table > thead > tr > th.farm-A-tablet-pc {display:table-cell;}
        .farm-A-table > thead > tr > th.farm-A-pc {display:table-cell;}
        .farm-A-table > tbody > tr.farm-A-mobile {display:none;}
        .farm-A-table > tbody > tr.farm-A-mobile-tablet {display:none;}
        .farm-A-table > tbody > tr > th, .farm-A-table > tbody > tr > td {font-size:13px;}
        .farm-A-table > tbody > tr > th.farm-A-tablet-pc, .farm-A-table > tbody > tr > td.farm-A-tablet-pc {display:table-cell;}
        .farm-A-table > tbody > tr > th.farm-A-pc, .farm-A-table > tbody > tr > td.farm-A-pc {display:table-cell;}
        .farm-A-table.farm-A-row > tbody > tr > th {display:table-cell; text-align:center;}
        .farm-A-table.farm-A-row > tbody > tr > td {display:table-cell;}

        .farm-A-btn-wrap a {margin-left:6px;}
        .farm-A-btn-wrap a:first-child {margin-left:0;}
        .farm-A-btn-wrap .farm-A-half {display:inline-block;}
        .farm-A-btn-wrap .farm-A-half a {float:none; width:auto;}
        .farm-A-btn-wrap .farm-A-half a:first-child {float:none; width:auto;}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle {}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-medium {width:40px;}
        .farm-A-btn-wrap .farm-A-half a.farm-A-btn-circle.farm-A-big {width:80px;}

        .farm-A-btn-circle.farm-A-big {display:inline-block; width:80px; height:80px; padding:40px 0; border-radius:50%;}
      
        .farm-A-nowrap {white-space:nowrap;}
    }

 

 

 

# html

 

        <tbody>
            <tr loop="$myboard_mylist_row as $k => $v">
                <td class="farm-A-pc">{$v[numbering]}</td>
                <td>
                    <a href="{$v[read_url]}" class="farm-A-tablet-pc farm-A-atext farm-A-nowrap">{$v[s_v2]}</a>
                    <span class="farm-A-mobile farm-A-align-left" cond="$s_v2_name"><a href="{$v[read_url]}" class="farm-A-atext">{$s_v2_name} : {$v[s_v2]}</a></span>
                    
                    <span class="farm-A-mobile farm-A-align-left" cond="$s_v3_name">{$s_v3_name} : {$v[s_v3]}</span>
                    <span class="farm-A-mobile farm-A-align-left" cond="$s_v4_name">{$s_v4_name} : {$v[s_v4]}</span>
                    <span class="farm-A-mobile farm-A-align-left" cond="$s_t1_name">{$s_t1_name} : {$v[s_t1]}</span>
                    
                </td>
                <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v1]}</td>
                <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v3]}</td>
                <td class="farm-A-tablet-pc farm-A-nowrap">{$v[s_v4]}</td>
                                <td class="farm-A-tablet-pc">{$v[s_t1]}</td>
                
            </tr>

            <tr cond="!count($myboard_mylist_row)">
                <td colspan="7" class="farm-A-empty">등록된 데이터가 없습니다.</td>
            </tr>
        </tbody>

게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 고**님이 문의하셨습니다.
    상담신청
  • 박**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    계약완료
  • 숙**님이 문의하셨습니다.
    계약완료
  • 만**님이 문의하셨습니다.
    계약완료
  • 주**님이 문의하셨습니다.
    상담완료
  • 성**님이 문의하셨습니다.
    상담완료
  • 현**님이 문의하셨습니다.
    상담완료
  • 하**님이 문의하셨습니다.
    상담완료
  • 이**님이 문의하셨습니다.
    상담완료
  • 정**님이 문의하셨습니다.
    상담완료

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 211.215.17.210
2차 ns2.webit.kr 211.215.17.212

서버 호스팅 주소

서울 서초구 서초동 1710-1 SK 브로드밴드 IDC

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기