- 화면이 작아졌을 때, 인증제 명, 대상, 일정 같은 부분의 내용이 두줄이 되면 보기 싫어져서 그런것 같네요.
- 해당 부분은 항상 한줄로 출력되도록 다음과 같이 추가하였습니다.
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>
빠른상담 신청현황
무통장 계좌번호
하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)
네임서버
1차 ns1.webit.kr 221.139.47.17
2차 ns2.webit.kr 121.125.73.38
서버 호스팅 주소
서울 서초구 서초동 1710-1 SK 브로드밴드 IDC