我想让我的表对我正在使用的应用程序做出响应。我尝试了所有不同的方法，如在窗口大小减小时滚动。但是我希望有一种方法可以让桌子挤压或抽出以适应窗户的大小。请找我的代码。希望我能尽快找到答案！
.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>
答案 0 :(得分：0)
您可以查看为项目添加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。
答案 1 :(得分：0)
嗯，为了使其具有响应性，您需要使用bootstrap或flexbox或其他内容进行重大的重新设计。
但你仍然可以拥有一张响应表。将以下代码添加到CSS中，应该可以工作：
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
}
如果您不喜欢它的外观并且仍然希望维护桌面的表格布局并且对移动设备有响应，那么这是另一个技巧。您可以使用桌面的常规表格布局，对于窗口宽度小于900像素的移动设备和桌面，它将垂直堆叠：
@media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: block;
}
}
编辑：对于“挤压”效果，您可以这样做：
@media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
width: 32%;/* to have 3 columns */
}
}
编辑2 ：这是使用上次修改的demo。需要注意的两件事：
box-sizing: border-box;添加到“td”。此：
<td>
cell1
</td>
<td>
cell2
</td>
应改为：
<td>
cell1
</td><td>
cell2
</td>