반응형
WordPress 내에 응답 테이블을 만듭니다.
응답 테이블에 대해 이미 많은 질문이 이 스택에 게시되어 있다는 것을 알고 있지만, 제가 그 모든 것을 겪었고 제 문제에 대한 해결책을 찾지 못했다는 것을 믿어주세요.아니면 내가 뭘 찾고 있는지 정확히 몰랐을 수도 있고 그래서 어쩔 수 없이 여기서 질문을 하게 된 겁니다.
당면한 문제는 아주 간단합니다.워드프레스 사이트를 만들고 있습니다.저는 주제별 가격표가 마음에 들지 않아서 직접 만들기 위해 도전하게 되었습니다.다음은 제가 이 표를 필요로 하는 워드프레스 페이지 링크입니다. http://www.desklers.com/uae/undergraduate-packages .
그래서 제 테이블은 괜찮은데 반응이 잘 안 되네요.다음은 제가 워드프레스로 시각적 작곡가의 raw html 위젯에 넣을 html입니다.
<style type="text/css">
/*General styles*/
/*Features table------------------------------------------------------------*/
@media screen and (max-width: 640px) {
.features-table {
overflow-x: auto;
display: block;
}
}
.features-table
{
font-family:'Open Sans';
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
text-shadow: 0 1px 0 #fff;
color: #2a2a2a;
background: #fafafa;
background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
}
#check {
color: #26CCA4;
font-size:20px;
}
#cross {
color: #E74A4A;
font-size: 20px;
}
.features-table td
{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-bottom: 1px solid #cdcdcd;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
white-space: nowrap;
text-align: center;
}
/*Body*/
.features-table tbody td
{
text-align: center;
}
.features-table tbody td:first-child
{
width: auto;
text-align: left;
}
.features-table td:nth-child(2), .features-table td:nth-child(3), .features-table td:nth-child(4)
{
background: #DADADA;
background: #E3E3E3;
border-right: 1px solid white;
}
.features-table tr:nth-child(even)
{
background: #e7f3d4;
background: #E3E3E3;
}
/*Header*/
.features-table thead td
{
font-family: 'Open Sans';
font-size: 16;
color: white;
line-height:16px;
font-weight:100;
font-variant:small-caps;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top: 1px solid #eaeaea;
}
.features-table thead td:first-child
{
border-top: none;
}
/*Footer*/
.features-table tfoot td
{
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #dadada;
}
.features-table tfoot td:first-child
{
border-bottom: none;
}
</style>
<div id="main">
<table class="features-table">
<thead>
<tr>
<td></td>
<td style="background-color:#000000;"><div class="box">
<div class="ribbon"><span>FEATURED</span></div><p style=" color: white; font-size:30px; font-weight:100;"> Unlimited</p></div></td>
<td style="background-color:#229BAA;"><p style=" color: white; font-size:30px; font-weight:100;">Premium</p></td>
<td style="background-color:#FEFEFE;"><p style=" color: black; font-size:30px; font-weight:100;">Basic</p></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
<td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td id="price" style="background-color:#000000;">$5000</td>
<td id="price" style="background-color:#2BC2D5;">$3000</td>
<td id="price" style="background-color:#FEFEFE; color:black;">$1500</td>
</tr>
<tr id="one">
<td>Number of Colleges Universities</td>
<td>20</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Number of Countries you can apply</td>
<td>Unlimited</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>Money Back Guarantee</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>High school planning</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Academic advising and coaching</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Transcript evaluations</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Admission Documents Handling</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in SAT, ACT and Subject Tests</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>SAT, ACT and Subject Tests Preparation and Coaching</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Athletic Recruitment</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in selecting best fit colleges</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Developing and finalizing a college list</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance and coaching about how to write winning Application Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Proof reading and feedback on College Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Discussing, helping, developing and finalizing College Ideas for Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Proof Reading and finalizing Application Essays and Supplements</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Letters of Recommendation</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Leadership opportunities</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Summer strategies</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Social Work Opportunities</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Extra-Curricular activities guidance</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in Scholarship applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Assistance in filling scholarship applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Guidance in CSS and other financial aid applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
</tr>
<tr>
<td>Assistance in filling CSS and other financial aid applications</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Follow-ups</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
<tr>
<td>Visa Application Guidance and Handling</td>
<td><i class="mk-moon-checkmark" id="check"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
<td><i class="mk-icon-remove" id="cross"></i></td>
</tr>
</tbody>
</table>
</div>
</body>
다음은 제 코드의 JSfiddle입니다. https://jsfiddle.net/d96q4h3d/
미디어 쿼리를 사용하고 overflow-x를 auto로 설정하여 테이블을 x축을 따라 드래그 가능하게 만들 수 있었습니다.그러나 페이지가 로드될 때 테이블이 전체로 표시되어 사용자가 전체 테이블을 볼 수 있기를 바랍니다.그러면 그가 자세히 보고 싶다면 어떤 특정한 부분을 확대할 수 있습니다.
그 문제에 대해 어떤 도움이라도 주시면 감사하겠습니다.저는 구글에 대해 많은 조사를 해보았지만 페이지의 전체 표를 볼 수 있는 방법을 설명하는 특정한 해결책을 찾지 못했습니다.
감사해요.
첫번째 제거white-space: nowrap;
이제 테이블을 max-width로 만들어야 합니다:(원하는 크기)
예제와 같이 최대 너비는 900 px입니다. https://jsfiddle.net/d96q4h3d/7/
당신이 테이블을 더 작게 만들고 싶다면, 당신은 크기를 줄여야 할 것입니다.<thead>태그, 그리고 "#price" id는 다음과 같습니다.
@media screen and (max-width: 800px) {
.features-table thead p {
font-size: 20px !important;
}
#price {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.features-table thead p {
font-size: 15px !important;
}
#price {
font-size: 15px;
}
.features-table td{
padding: 0px 10px;
}
}
그리고 항상 @media 화면을 맨 위가 아니라 맨 아래 끝에 놓으시기 바랍니다!
부트스트랩 툴킷을 기반으로 워드프레스 테마를 채택하는 것을 고려해보셨습니까?
그렇게 하면 이런 패턴을 사용하여 테이블을 배출할 수 있고, 온갖 번거로움 없이 반응할 수 있습니다.
<div class="table-responsive">
<table class="table">
your table
</table>
</div>
부트스트랩은 응답 테이블과 다른 UI 요소를 얻을 수 있는 정말 좋은 방법입니다. 부트스트랩의 개발자들은 모든 종류의 브라우저에 대해 디버깅을 잘 해냈습니다.
테이블은 본질적으로 반응이 없기 때문에 어려운 문제입니다.원하는 결과를 얻을 수 있는 많은 다양한 방법들이 있습니다.자바스크립트를 사용하는 경우도 많습니다.
여기에 제가 가장 좋아하는 순수 CSS(#8)를 포함한 다양한 기술들의 좋은 요약이 있습니다.
http://exisweb.net/responsive-table-plugins-and-patterns
편집:
모바일 장치에서 전체 테이블을 볼 수 있어야 하므로 이 경우에 적합한 솔루션은 다음과 같습니다.
https://github.com/ghepting/jquery-responsive-tables - 데모
언급URL : https://stackoverflow.com/questions/33354098/make-a-responsive-table-within-wordpress
반응형
'programing' 카테고리의 다른 글
| DataTable을 직렬화할 수 없습니다.DataTable 이름이 설정되지 않았습니다. (0) | 2023.10.22 |
|---|---|
| 윈도우즈에서 서명되지 않은 __int64의 printf 형식 (0) | 2023.10.22 |
| 자바스크립트에 유니코드 문자 삽입 (0) | 2023.10.22 |
| 워드프레스 열기ID가 StackOverflow와 함께 작동하지 않습니다. (0) | 2023.10.22 |
| 각도에서 td 속성 colspan으로 속성 바인딩을 사용하는 방법은 무엇입니까? (0) | 2023.10.17 |