ブートストラップ：1200px

Question

から表応答オーバーフロー-Xのスクロール私は、ブートストラップのテーブルを持っています。ブラウザのサイズを1200未満に変更すると、overflow-x：scrollが発生します。 これは私が試したコードです。

svg{ 
 
width:14px; 
 
} 
 

 
td{ 
 
font-size:16px; 
 
} 
 

 
@media (max-width:1200px){ 
 
.table-responsive{ 
 
    overflow-x: scroll !important; 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="table-responsive"> 
 
         <table class="table b-t b-b no-footer"> 
 
         <thead class="bg-white"> 
 
          <tr class="font-bold no_border font_size_12"> 
 
           <th class="sorting no_border" > 
 
            <div class="pull-left table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
             <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
             </label> 
 
            </div> 
 
            </div> 
 
           </th> 
 
           <th>Table head 1</th> 
 
           <th class="sorting no_border " >Table head 2</th> 
 
           <th class="sorting no_border " >Table head 3</th> 
 
           <th class="sorting no_border " >Table head 4</th> 
 
           <th class="sorting no_border " >Table head 5</th> 
 
           <th class="sorting no_border " >Table head 6</th> 
 
           <th class="sorting no_border " >Table head 7</th> 
 
           <th class="sorting no_border " >Table head 8</th> 
 
           <th class="sorting no_border " >Table head 9</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr class="odd cursor_pointer" > 
 
          <td valign="middle" > 
 
           <div class="table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
            <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
            </label> 
 
            </div> 
 
           </div> 
 
          </td> 
 
          <td valign="middle">Table Data 1</td> 
 
          <td valign="middle">Table Data 2</td> 
 
          <td valign="middle">Table Data 3</td> 
 
          <td valign="middle">Table Data 4</td> 
 
          <td valign="middle">Table Data 5</td> 
 
          <td valign="middle">Table Data 6</td> 
 
          <td valign="middle">Table Data 7</td> 
 
          <td valign="middle">Table Data 8</td> 
 
          <td> 
 
           <div class="particular_record_action_selection_div"> 
 
           <span> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147 
 
            \t c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542 
 
            \t c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766 
 
            \t c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225 
 
            \t c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735 
 
            \t l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883 
 
            \t c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188 
 
            \t c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/> 
 
            <path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583 
 
            \t c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217 
 
            \t c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364 
 
            \t c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327 
 
            \t c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208 
 
            \t c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" > 
 
            <path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85 
 
            \t c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201 
 
            \t V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/> 
 
            <path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05 
 
            \t H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/> 
 
            </svg> 
 

 
           </span> 
 
           </div> 
 
          </td> 
 
          </tr> 
 
         </tbody> 
 
         </table> 
 
        </div>

あなたは私が欲しい、ブラウザに表示し、それをリサイズすることができオーバーフロー-X：私はちょうど1200pxの下に私のブラウザのサイズを変更するときにスクロール。

助けがあれば助かります。 ありがとうございます。

Answer 1

また1200pxとして幅の修正をする必要があります。ブラウザが画面に合わせてテーブルの内容を伸ばすしようとしている

@media (max-width: 1200px) { 
    .table-responsive { 
     overflow-x: scroll !important; 
     width: 1200px; 
    } 
} 

Answer 2

： は、以下のCSSコードです。スクロールを表示させたい場合は、表に最小幅が必要です。最小幅：1200px;

希望します。 ;私たちはテーブルの応答性by default bootstrap behaviour用幅768pxの下に行くとき）

svg{ 
 
width:14px; 
 
} 
 

 
td{ 
 
font-size:16px; 
 
} 
 

 
@media (max-width:1200px){ 
 
.table-responsive{ 
 
    min-width: 1200px; /* <-- ;) */ 
 
    overflow-x: scroll !important; 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="table-responsive"> 
 
         <table class="table b-t b-b no-footer"> 
 
         <thead class="bg-white"> 
 
          <tr class="font-bold no_border font_size_12"> 
 
           <th class="sorting no_border" > 
 
            <div class="pull-left table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
             <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
             </label> 
 
            </div> 
 
            </div> 
 
           </th> 
 
           <th>Table head 1</th> 
 
           <th class="sorting no_border " >Table head 2</th> 
 
           <th class="sorting no_border " >Table head 3</th> 
 
           <th class="sorting no_border " >Table head 4</th> 
 
           <th class="sorting no_border " >Table head 5</th> 
 
           <th class="sorting no_border " >Table head 6</th> 
 
           <th class="sorting no_border " >Table head 7</th> 
 
           <th class="sorting no_border " >Table head 8</th> 
 
           <th class="sorting no_border " >Table head 9</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr class="odd cursor_pointer" > 
 
          <td valign="middle" > 
 
           <div class="table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
            <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
            </label> 
 
            </div> 
 
           </div> 
 
          </td> 
 
          <td valign="middle">Table Data 1</td> 
 
          <td valign="middle">Table Data 2</td> 
 
          <td valign="middle">Table Data 3</td> 
 
          <td valign="middle">Table Data 4</td> 
 
          <td valign="middle">Table Data 5</td> 
 
          <td valign="middle">Table Data 6</td> 
 
          <td valign="middle">Table Data 7</td> 
 
          <td valign="middle">Table Data 8</td> 
 
          <td> 
 
           <div class="particular_record_action_selection_div"> 
 
           <span> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147 
 
            \t c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542 
 
            \t c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766 
 
            \t c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225 
 
            \t c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735 
 
            \t l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883 
 
            \t c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188 
 
            \t c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/> 
 
            <path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583 
 
            \t c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217 
 
            \t c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364 
 
            \t c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327 
 
            \t c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208 
 
            \t c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" > 
 
            <path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85 
 
            \t c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201 
 
            \t V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/> 
 
            <path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05 
 
            \t H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/> 
 
            </svg> 
 

 
           </span> 
 
           </div> 
 
          </td> 
 
          </tr> 
 
         </tbody> 
 
         </table> 
 
        </div>

Answer 3

次のCSSは、トリガを取得します。必要なのは、このCSSを1200ピクセル未満でトリガーすることだけです。

@media screen and (max-width: 1200px){ 

.table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-y: hidden; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #ddd; 
} 
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th{white-space:nowrap;} 
} 

svg{ 
 
width:14px; 
 
} 
 

 
td{ 
 
font-size:16px; 
 
} 
 

 

 

 
@media screen and (max-width: 1200px){ 
 

 
.table-responsive { 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
    overflow-y: hidden; 
 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
 
    border: 1px solid #ddd; 
 
} 
 
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th{white-space:nowrap;} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="table-responsive"> 
 
         <table class="table b-t b-b no-footer"> 
 
         <thead class="bg-white"> 
 
          <tr class="font-bold no_border font_size_12"> 
 
           <th class="sorting no_border" > 
 
            <div class="pull-left table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
             <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
             </label> 
 
            </div> 
 
            </div> 
 
           </th> 
 
           <th>Table head 1</th> 
 
           <th class="sorting no_border " >Table head 2</th> 
 
           <th class="sorting no_border " >Table head 3</th> 
 
           <th class="sorting no_border " >Table head 4</th> 
 
           <th class="sorting no_border " >Table head 5</th> 
 
           <th class="sorting no_border " >Table head 6</th> 
 
           <th class="sorting no_border " >Table head 7</th> 
 
           <th class="sorting no_border " >Table head 8</th> 
 
           <th class="sorting no_border " >Table head 9</th> 
 
          </tr> 
 
         </thead> 
 
         <tbody> 
 
          <tr class="odd cursor_pointer" > 
 
          <td valign="middle" > 
 
           <div class="table_data_checkbox"> 
 
            <div class="checkbox v-middle m-t-none m-b-none "> 
 
            <label class="i-checks i-checks-sm"> 
 
             <input type="checkbox"> 
 
             <i></i> 
 
            </label> 
 
            </div> 
 
           </div> 
 
          </td> 
 
          <td valign="middle">Table Data 1</td> 
 
          <td valign="middle">Table Data 2</td> 
 
          <td valign="middle">Table Data 3</td> 
 
          <td valign="middle">Table Data 4</td> 
 
          <td valign="middle">Table Data 5</td> 
 
          <td valign="middle">Table Data 6</td> 
 
          <td valign="middle">Table Data 7</td> 
 
          <td valign="middle">Table Data 8</td> 
 
          <td> 
 
           <div class="particular_record_action_selection_div"> 
 
           <span> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M21.459,5.761l7.02,7.056L10.709,30.68l-7.016-7.056L21.459,5.761z M33.805,4.058l-3.13-3.147 
 
            \t c-1.21-1.215-3.176-1.215-4.389,0l-3,3.016l7.021,7.056l3.498-3.516C34.744,6.523,34.744,5.001,33.805,4.058z M0.02,33.542 
 
            \t c-0.127,0.578,0.391,1.095,0.965,0.955l7.822-1.907l-7.015-7.056L0.02,33.542z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;"> 
 
            <path style="fill:#59666E;" d="M26.663,7.373l-1.677,2.133c3.614,2.785,5.417,7.293,4.706,11.766 
 
            \t c-0.521,3.283-2.303,6.167-5.015,8.125c-2.714,1.956-6.033,2.75-9.348,2.232c-6.844-1.067-11.536-7.448-10.46-14.225 
 
            \t c0.521-3.284,2.303-6.169,5.015-8.126c2.369-1.708,5.201-2.527,8.087-2.365l-2.36,2.452l1.75,1.653l3.725-3.872v0.001l1.668-1.735 
 
            \t l-1.749-1.652h-0.001l-3.908-3.689l-1.67,1.735l2.546,2.403c-3.461-0.163-6.852,0.834-9.694,2.883 
 
            \t c-3.303,2.382-5.471,5.895-6.105,9.891c-1.31,8.249,4.4,16.017,12.731,17.314c0.805,0.125,1.609,0.188,2.409,0.188 
 
            \t c3.209,0,6.326-0.998,8.968-2.906c3.304-2.38,5.472-5.893,6.105-9.889C33.253,16.248,31.06,10.761,26.663,7.373z"/> 
 
            <path style="fill:#59666E;" d="M18.778,27.063L18.778,27.063L18.778,27.063v-1.555c1.862-0.207,3.675-1.372,3.675-3.583 
 
            \t c0-3.005-2.822-3.35-4.883-3.601c-1.318-0.157-2.327-0.337-2.327-1.128c0-1.099,1.565-1.217,2.238-1.217 
 
            \t c0.998,0,2.063,0.465,2.425,1.058l0.106,0.173l2.069-0.948l-0.102-0.207c-0.771-1.562-2.154-2.014-3.202-2.195v-1.371h-2.425v1.364 
 
            \t c-2.256,0.329-3.595,1.57-3.595,3.344c0,2.894,2.653,3.187,4.587,3.402c1.725,0.201,2.528,0.623,2.528,1.327 
 
            \t c0,1.343-1.878,1.448-2.455,1.448c-1.282,0-2.518-0.634-2.875-1.474l-0.088-0.208l-2.25,0.944l0.091,0.208 
 
            \t c0.665,1.543,2.102,2.51,4.058,2.74v1.479H18.778z"/> 
 
            </svg> 
 
           </span> 
 
           <span class="m-l-sm"> 
 
            <svg viewBox="0 0 34.56 34.56" style="enable-background:new 0 0 34.56 34.56;" > 
 
            <path style="fill:#59666E;" d="M4.973,8.047c0,0,0.923,0.875,0.923,1.384v22.401c0,1.482,1.325,2.686,2.96,2.686h16.85 
 
            \t c1.635,0,2.96-1.204,2.96-2.686V9.433c0-0.511,0.926-1.384,0.926-1.384V5.334H4.973V8.047z M22.121,11.148h2.201v17.296h-2.201 
 
            \t V11.148z M16.228,11.148h2.195v17.296h-2.195V11.148z M10.919,11.148h2.198v17.296h-2.198V11.148z"/> 
 
            <path style="fill:#59666E;" d="M30.667,3.093h-6.823c-0.341-1.731-2.011-3.05-4.015-3.05h-5.091c-2.005,0-3.675,1.319-4.015,3.05 
 
            \t H3.896V4.75h26.771V3.093z M13.007,3.093c0.28-0.613,0.951-1.045,1.728-1.045h5.093c0.778,0,1.446,0.435,1.729,1.045H13.007z"/> 
 
            </svg> 
 

 
           </span> 
 
           </div> 
 
          </td> 
 
          </tr> 
 
         </tbody> 
 
         </table> 
 
        </div>