html - 压缩表格以使其响应式 css

Question

我想让我的表格响应我正在使用的应用程序。我尝试了所有不同的方法，比如随着窗口大小的减小而滚动。但我想有一种方法可以挤压或挤压 table 以适应 window 的大小。请找到我的代码。希望我能尽快找到答案!

.buttonListContainer {
  position: fixed;
  top: 8.2%;
}

.buttonlistcontext {
  position: fixed;
  border: 0.1px solid #ddd;
  margin-top: 1px;
  background-color: transparent;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

<div class="buttonListContainer" style="overflow:auto;margin-top:0;">
  <table id="buttonList" class="buttonlistcontext" style="visibility:hidden;">
    <tr>

      <!-- the spike count -->
      <td>
        <font size="2">Eventcount</font>: <input type="text" id="EventCount" style="width:40px;text-align:center;" disabled></td>
      <td><button style="cursor:pointer" onclick="reset()"><font size="2">Reset</font></button></td>

      <!-- the jump to very beginning button -->
      <td><input type="image" id="btn01" style="height:15px;width:15px;" src="images/play_first.png" onclick="jump_firstFrame();" />

        <!-- the play back button -->
        <input type="image" id="btn02" style="height:15px;width:15px;" src="images/play_back2.png" onclick="playBack();" />

        <!-- the go back button -->
        <input type="image" id="btn03" style="height:15px;width:15px;" src="images/play_back.png" onclick="go_back();" />

        <!-- the stop button -->
        <input type="image" id="btn07" style="height:15px;width:15px;" src="images/stop.png" onclick="animationFlag = 0; cancelAnimationFrame(myAnimation);" />

        <!-- the go forward button -->
        <input type="image" id="btn04" style="height:15px;width:15px;" src="images/play_fwd.png" onclick="go_forward();" />

        <!-- the play forward button -->
        <input type="image" id="btn05" style="height:15px;width:15px;" src="images/play_forward2.png" onclick="play();" />

        <!-- the jump to last button -->
        <input type="image" id="btn06" style="height:15px;width:15px;" src="images/play_last.png" onclick="jump_lastFrame();" /></td>

      <!-- the speed buttons -->
      <td>
        <font size="2">Speed</font>: x<select name="PlaySpeed" id="PlaySpeed" onchange="Speed(this.value);">
                    <option value= "1">1</option>
                    <option value= "5">5</option>
                    <option value= "10" selected="selected">10</option>
                    <option value= "50">50</option>
                    <option value= "100">100</option>
                    <option value= "200">200</option>

                </select>
      </td>

      <!-- Wall color drop-down list -->
      <td>
        <font size="2">Wall color</font>: <select id="WallColor" style="background-color: #CCFFCC" onchange="wallColor(this.value);">
                    <option value="1" style="background-color: #F0F0F0">Silver gray</option>
                    <option value="2" style="background-color: #CCFFCC" selected="selected">Mint green</option>
                    <option value="3" style="background-color: #FCFBE3">Vanilla cream</option>
                    <option value="4" style="background-color: #d5e8f4">Water blue</option>
                </select>
      </td>

      <!-- the scale up button -->
      <td>
        <font size="2">Sensitivity</font>: </td>
      <td><input type="image" id="btn08" style="height:15px;width:15px;" src="images/scale_up.png" onclick="sensitivity_Up();" /></td>
      <td><input type="image" id="btn09" style="height:15px;width:15px;" src="images/scale_down.png" onclick="sensitivity_Down();" /></td>

      <!-- the Montage buttons -->
      <td>
        <font size="2">Montage</font>: <select name="MontageSwap" id="MontageSwap" onchange="montageSwap(this.value);">
                    <option value= "1" selected="selected">Common Average</option>
                    <option value= "2">CII</option>
                    <option value= "3">Bipolar</option>
                </select>
      </td>


      <td>
        <!-- <button id="filterBtn" style = "cursor:pointer" onclick="filter()" ><font size="2">Filter</font></button> -->
        <a href="javascript:void(0)" onclick="filter()">
          <font size="2">Filter</font>
        </a>
      </td>

      <!-- the line cursor -->
      <td><input type="checkbox" id="LineCursor" onclick="lineCursorFlag=this.checked;draw_TeeChart()" checked/>
        <font size="2">Line cursor</font>
      </td>

      <!-- the pink bars -->
      <td><input type="checkbox" id="BGbar" onclick="BGbarFlag=this.checked;draw_TeeChart()" checked/>
        <font size="2">Highlights</font>
      </td>

      <!-- the Time interval -->
      <td>
        <font size="2">Time interval</font>: <select name="TimeInterval" id="timeIntervalSelect" onchange="timeInterval=this.value*fs;draw_TeeChart()">
                    <option value= 5>5 sec</option>
                    <option value= 10 selected="selected">10 sec</option>
                    <option value= 20>20 sec</option>
                </select>
      </td>

      <td>
        <button id="modalBtn-pre" style="cursor:pointer" onclick="CGI()"><font size="2">Pre-annotation</font></button>
      </td>
    </tr>

  </table>
</div>

Answer 1

你可以看看添加 bootstrap到你的元素。这可以为您节省大量时间和精力。 Bootstrap非常适合编写响应式代码。

如果你已经添加了bootstrap，只需执行以下操作即可在移动设备上实现你的表格效果:

<div class="table-responsive">
    <table class="table">
        ....
    <table>
</div>

这将为您提供移动设备上的可滚动表格。如果你不想走引导路线，你可以用上面的 HTML 尝试以下操作:

<style>

@media screen and (max-width: 767px){
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

.table{
    width: 100%;
    max-width: 100%;
}

</style>

这应该可以解决问题。看看这个 plunkr .

但真的要看看添加 Bootstrap 。