하나솔루션
Home > 고객센터 > 자료실

자료실

자료실

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

  • 하나솔루션
  • 2018-05-09 12:22:56
  • hit895
  • 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]

열기 닫기

CUSTOMER CENTER

010-2343-0702

월-금 am 9:30 - pm 06:00
점심시간 : am 12:00 - pm 01:00
토ㆍ일 / 공휴일 휴무

무통장 입금계좌 안내

661-910388-38207

네임서버안내

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