디자인검색
Home > 고객센터 > 자료실

자료실

자료실 css 테이블에 글씨가 한줄로 나오게 소스
2018-05-09 12:22:56
하나솔루션 조회수 395
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>

HANASOLUTION

SERVER LOCATION

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

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns1.webit.kr
  211.215.17.212
상단으로 바로가기