고정 테이블 너비와 오버플로 : 자동. 어떻게 스크롤 할 수 있을까요?

내 Wordpress 사이트의 코딩을 더 잘 이해하려고 노력하고 있으므로 가능한 한 많은 플러그인을 제거하는 것에 대해 염두에 두었습니다. 매우 열심히해서는 안되는 테이블 플러그인부터 시작합니다.고정 테이블 너비와 오버플로 : 자동. 어떻게 스크롤 할 수 있을까요?

테이블을 고정 너비 (756px)로 표시하고 내용을 작은 디스플레이에서 보거나 브라우저 창의 크기를 조정할 때 스크롤하도록합니다. 목표는 테이블 레이아웃을 정확히 동일하게 유지하는 것입니다.

문제는 너비를 지정하면 스크롤 옵션없이 테이블이 잘리고 크기를 100 %로 설정하면 원하지 않는 크기가 조정된다는 것입니다.

내가 사용하는 플러그인을 리버스 엔지니어링하려고 시도했지만 아직 지식을 얻지 못했다고 생각합니다.

은 이제 오랜 시간이 걸렸다 난 그냥 다음 장애물 :

Table so far

HTML로 이동하려면 :

<div class="tabel"> 
    <table> 
     <tr> 
      <th>Eten &amp; Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th> 
      <th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th> 
      <th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th> 
      <th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th> 
      <th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th> 
      <th>Totaal</th> 
     </tr> 
     <tr> 
      <td>&#8369; 35.460,05</td> 
      <td>&#8369; 30.484,84</td> 
      <td>&#8369; 16.254,76</td> 
      <td>&#8369; 5.836,00</td> 
      <td>&#8369; 4.086,28</td> 
      <td>&#8369; 92.121,93</td> 
     </tr> 
     <tr> 
      <td>&#8364;673,74</td> 
      <td>&#8364;579,21</td> 
      <td>&#8364;308,84</td> 
      <td>&#8364;110,88</td> 
      <td>&#8364;77,64</td> 
      <td>&#8364;1.750,32</td> 
     </tr> 
    </table> 
</div>

CSS :

.tabel { 
    white-space: nowrap; 
    overflow-x: auto; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5),  rgba(144,72,138,0.5)); 
} 
table { 
    border-collapse: collapse; 
    border: 3px solid black; 
    table-layout: fixed; 
} 
tr, th, td { 
    text-align:center; 
    border: 1px solid black; 
    margin: 5px; 
    white-space: nowrap; 
} 
th { 
    vertical-align: top; 
}

출처

2017-01-01 Erick Arends

나는이 크롬, 사파리, 파이어 폭스 (Mac에서 모두 사용 시도가), 그것은 좁은 프레임에서 수평으로 스크롤 위에 쓴대로 (나는 변화를 만들지 않았다). 여기에 jsbin이 있습니다. 동일한 결과를 얻었는지 확인하십시오 - https://jsbin.com/fuvehe/2/edit?html,css,output –

-1

나는 알아 낸거야 .. 관심있는 사람은 .. 여기에 결과와 대답이있다.

HTML :

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="livecss.css"> 
</head> 
<body> 
    <table class="tabel"> 
     <tr> 
      <th colspan="6">Indonesi&euml; - 29 dagen</th> 
     </tr> 
     <tr> 
      <th>Eten &amp; Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th> 
      <th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th> 
      <th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th> 
      <th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th> 
      <th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th> 
      <th>Totaal</th> 
     </tr> 
     <tr> 
      <td>&#8369; 35.460,05</td> 
      <td>&#8369; 30.484,84</td> 
      <td>&#8369; 16.254,76</td> 
      <td>&#8369; 5.836,-</td> 
      <td>&#8369; 4.086,28</td> 
      <td>&#8369; 92.121,93</td> 
     </tr> 
     <tr> 
      <td>&#8364; 673,74</td> 
      <td>&#8364; 579,21</td> 
      <td>&#8364; 308,84</td> 
      <td>&#8364; 110,88</td> 
      <td>&#8364; 77,64</td> 
      <td>&#8364; 1.750,32</td> 
     </tr> 
    </table>

(사용자 정의 스크롤 포함)

CSS)

/*TABEL CSS*/ 
table { 
    overflow-x: auto; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    /*background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5), rgba(144,72,138,0.5))*/ 
    border-collapse: collapse; 
    display: block; 
     table-layout: fixed; 
    border-style: hidden; 
} 
th, td { 
    border: 1px solid white; 
    white-space: nowrap; 
} 
th { 
    text-align: center; 
    vertical-align: top; 
    background-color: #b9cc66; 
    padding: 5px; 
} 
td { 
    text-align: right; 
    padding: 5px 10px 5px 5px; 
    background-color: rgba(144,72,138,0.5) 
} 

.tabel tr > td:last-of-type { 
    background-color: rgba(144,72,138,0.8) 
} 

    /*SCROLLBAR STYLE*/ 
    ::-webkit-scrollbar { 
     -webkit-appearance: none; 
    } 

    ::-webkit-scrollbar:vertical { 
     width: 12px; 
    } 

    ::-webkit-scrollbar:horizontal { 
     height: 12px; 
    } 

    ::-webkit-scrollbar-thumb { 
     background-color: rgba(0,0,0,0.5); 
     border-radius: 10px; 
     border: 2px solid #ffffff; 
    } 

    ::-webkit-scrollbar-track { 
     border-radius: 10px; 
     background-color: rgba(185,204,102,0.2); 
    } 
    /*EINDE SCROLLBAR STYLE*/ 
/*EINDE TABEL CSS*/

출처

2017-02-23 14:44:27

고정 테이블 너비와 오버플로 : 자동. 어떻게 스크롤 할 수 있을까요?

답변

관련 문제