css - HTML 表 : Overflow-x scroll if no of columns are more

Question

我有一个包含特定列的表格。如果我添加列，那么表格 div 应该水平滚动。

假设我有 10 列，然后再添加 2 列。

所以我希望滚动最多 10 列，如果还有 2 列，则应该有 overflow-x:scroll。

.horizontal_scroll_div{
  
}

.horizontal_scroll_div .scroll_table_div{
  overflow-x: scroll !important;
}

.horizontal_scroll_div .scroll_table_div .table_section{
  width:1200px;
}

<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="horizontal_scroll_div">
    <div class="scroll_table_div b">
      <div class="table_section">
      <div class="row m-l-none m-r-none " >
          <div class="col-sm-12 col-md-12 set_padding_0">
                <div class="table-responsive m-b-none no_border">
                <table class="table b-t b-b no-footer">
                  <thead class="bg-white">
                  <tr>
                    <th>column 1</th>
                    <th>column 2</th>
                    <th>column 3</th>
                    <th>column 4</th>
                    <th>column 5</th>
                    <th>column 6</th>
                    <th>column 7</th>
                    <th>column 8</th>
                    <th>column 9</th>
                    <th>column 10</th>
                    <th>column 11</th>
                    <th>column 12</th>
                    
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>value 1</td>
                    <td>value 2</td>
                    <td>value 3</td>
                    <td>value 4</td>
                    <td>value 5</td>
                    <td>value 6</td>
                    <td>value 7</td>
                    <td>value 8</td>
                    <td>value 9</td>
                    <td>value 10</td>
                    <td>value 11</td>
                    <td>value 12</td>
                  </tr>
                  </tbody>
                  </table>
               </div>
          </div>
       </div>
  </div>
  </div>
  </div>

任何帮助都会很棒。谢谢。

Answer 1

为十列设置固定宽度，这样添加的额外列将超过固定宽度，导致出现滚动。在这种情况下你可以使用

overflow-x:auto;