Xetown에서 아래 내용이 있어서 팁으로 남겨 봅니다.
먼저 테이블을 만들어야 합니다. 아래 사이트를 활용하면 유용합니다.
일단 사용하는 게시판 스킨에서 본문에서 확장변수가 출력되는 부분을 찾습니다.
xedition 스킨을 예로 들면 _read.html 파일의 아래 부분입니다.
<!-- Extra Output --> <div class="exOut" cond="$oDocument->isExtraVarsExists() && $oDocument->isAccessible() && $module_info->data_form==''"> <table border="1" cellspacing="0" summary="Extra Form Output"> <tr loop="$oDocument->getExtraVars() => $key,$val"> <th scope="row">{$val->name}</th> <td>{$val->getValueHTML()} </td> </tr> </table> </div> <!-- /Extra Output --> <!--// 폼형태 --> <include cond="$module_info->data_form=='Y' && $oDocument->isExtraVarsExists() && $oDocument->isAccessible()" target="_read_form.html" />
먼저 skin.xml를 열어서 설정을 추가합니다.
<var name="data_form" type="radio">
<title>폼 형태</title>
<description>확장변수를 폼형태로 출력합니다.</description>
<options value="">
<title>출력 안함(기본)</title>
</options>
<options value="Y">
<title>출력</title>
</options>
</var>
_read.html 파일에 빨간색 코드를 추가합니다.
그리고 아래의 내용으로 _read_form.html 새 파일을 만듭니다.
<div class="form_box">
<table class="tg" loop="$oDocument->getExtraVars() => $key,$val">
<thead cond="$val->getValueHTML()">
<tr cond="$val->eid=='f0'">
<td class="tg-21kx">
{$val->getValueHTML()}
</td>
</tr>
</thead>
</table>
<div style="overflow-x: auto;">
<table class="tg">
<thead loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">
{@
$bg1=$val->eid=='f1' || $val->eid=='f3' || $val->eid=='f5';
$bg2=$val->eid=='f2' || $val->eid=='f4' || $val->eid=='f6';
}
<tr cond="$bg1">
<td class="tg-yfhh form_n">{$val->name}</td>
<td class="tg-yfhh form_v">{$val->getValueHTML()}</td>
</tr>
<tr cond="$bg2">
<td class="tg-yfhh form_n bg">{$val->name}</td>
<td class="tg-yfhh form_v bg">{$val->getValueHTML()}</td>
</tr>
</thead>
</table>
</div>
</div>
<style type="text/css">
.form_box { display:flex; justify-content:center; align-items:center; margin-bottom:10px; }
.tg { border-collapse:collapse; border-spacing:0; }
.tg td { border:1px solid #ddd; padding:5px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; word-break:normal; }
.tg .tg-21kx { display:table-cell; vertical-align:middle; text-align:center; min-width:100px; }
.tg .tg-yfhh { vertical-align:middle; line-height:30px; }
.tg .form_n { padding:0 10px; text-align:left; min-width:50px; font-weight:bold; background-color:#f6f6f6; }
.tg .form_v { padding-left:10px; width:300px; background-color:#fcfcfc; }
.tg .bg { background-color:#fff; }
</style>
확장변수 ID를 f0, f1, f2, f3... 으로 지정한 경우입니다. read_form.zip
작성자의 입맛에 맞게끔 수정하면 됩니다.
확장변수 검색을 Y로 선택하면 검색에서 해당 입력항목 이름으로 검색이 가능합니다.
f0의 경우는 "확장변수 업로드 모듈"을 사용하며 확장변수에 이미지를 출력하게 만들어줍니다.
출력화면 입니다.
위젯에 확장변수에서 체크된 해당 글 리스트...
Table의 폭이 디바이스 및 본문 가로 사이즈...
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
