테이블 중간 열을 스크롤 할 수있게하려면 어떻게합니까?

아래 그림과 같이 3 개의 열이있는 테이블이 있습니다. 나는 중간 열이 수평으로 스크롤하고 싶습니다, 그래서 모든 제로는 한 줄에 나타납니다, 그리고 내가 스크롤 할 때 모든 세 개의 행이 함께 이동합니다 .Thanks ![enter image description here ]테이블 중간 열을 스크롤 할 수있게하려면 어떻게합니까?

 <div class="inner hiddenDiv"> 

      <table class="table bold" id="tableMiddle"> 
       <thead class="row"> 
        <tr class=""> 

         <th class="col-xs-3" data-bind="text:Name">Name of the project</th> 


         <th class="col-xs-7"> 
          <!-- ko foreach: Totals --> 
          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 

          <span class="col-xs-1"> 
           <input disabled="disabled" data-bind="value:Math.round($data)"> 
          </span> 
          <!-- /ko --> 
         </th> 

         <th class="col-xs-2"> 
          <span class="col-xs-6"></span> 
          <span class="col-xs-6"></span> 
         </th> 
        </tr> 
       </thead> 

       <tbody class="row"> 
        <!-- ko foreach: Childs --> 
        <tr class=""> 
         <td class="col-xs-3" data-bind="text:Name">Employee2</td> 
         <td class="col-xs-7"> 
          <!-- ko foreach: Values --> 

          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 

          <!-- /ko --> 
         </td> 
         <td class="col-xs-2"> 
          <span class="col-xs-6"> 
           <input> 
          </span> 
          <span class="col-xs-6"> 
           <input> 
          </span> 
         </td> 
        </tr> 

        <tr class=""> 
         <td class="col-xs-3" data-bind="text:Name">Employee 1</td> 
         <td class="col-xs-7"> 
          <!-- ko foreach: Values --> 

          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 



          <span class="col-xs-1"> 
           <input data-bind="textInput:Value"> 
          </span> 

          <!-- /ko --> 
         </td> 
         <td class="col-xs-2"> 
          <span class="col-xs-6"> 
           <input> 
          </span> 
          <span class="col-xs-6"> 
           <input> 
          </span> 
         </td> 
        </tr> 
        <!-- /ko --> 
       </tbody> 
      </table> 

     </div> 



span { 
     min-width: 30px; 
} 
input { 
     padding: 4px 2px; 
     width: 90%; 
     background-color: transparent; 
     border: none; 
     border-radius: 1px; 
     text-align: center; 
}

출처

2016-12-13 Mina

시도'오버 플로우 엑스 : 자동;' 여기 찾았 [CSS에만 수평 오버 플로우 (http://stackoverflow.com/questions/1336600/css- only-horizontal-overflow) http://stackoverflow.com/questions/1336600/css-only-horizontal-overflow – m33bo

코드를 게시 할 수 있습니까? –

@ Keith.Abramo 전체 테이블 코드와 약간의 CSS를 추가했습니다 – Mina

이것은 테이블을 재구성 할 필요합니다. 가운데 열을 스크롤하려면 해당 열의 데이터를 하나의 요소에 포함시켜야합니다. 이렇게하려면 각 열에 3 개의 열과 하위 테이블이있는 테이블을 만드는 것이 좋을 것입니다. 그렇지 않으면 부트 스트랩을 사용하고 있기 때문에 더 나은 방법은 각 열에 3을 갖는 3 개의 열 그리드 시스템을 만드는 것입니다.

뭔가 같은 ...

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="row"></div> 
     <div class="row"></div> 
     <div class="row"></div> 
    </div> 
    <div class="col-sm-4 scroll-column"> 
     <div class="row"></div> 
     <div class="row"></div> 
     <div class="row"></div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="row"></div> 
     <div class="row"></div> 
     <div class="row"></div> 
    </div> 
</div> 

.scroll-column { 
    whitespace: no-wrap; 
    overflow-x: auto; 
}

출처

2016-12-13 18:03:03

이 중간 행을 부여 a max-width을 입력 한 다음 overflow-x: auto;을 입력하십시오. 예를 들어

<div class="container"> 

<div class="restrictedDiv"> 
<!-- long values here !--> 
</div> 

</div>

CSS :

.restrictedDiv { 

max-width: 500px; 
overflow-x: auto; 

}

출처

2016-12-13 17:19:30

나는 많은 것을 수색하고 많은 해결책을 시도했다. 그렇게 쉽지는 않지만 감사합니다. – Mina

이해가 안되는 문제는 무엇입니까? 요소 너비를 결정할 수없고 고정 된 너비를 제공 할 수없는 경우 JS를 사용하여 너비를 계산 한 다음 동적으로이를 바꿀 수 있습니다. 우리가 시도하고 도울 수있는 문제를 설명하십시오. –

@SankalpSsingha 미나는 '0'이있는 가운데 열을 스크롤하려고하는 행을 스크롤하려고하지 않습니다. 세 개의 열이 있으며 더 가벼운 열은 스크롤하려는 열입니다. 중간 행이 아니야. –

테이블 중간 열을 스크롤 할 수있게하려면 어떻게합니까?

답변

관련 문제