Squish table to make it responsive css

Question

I want to make my table responsive for the application i am using. I have tried all different approach like making it scroll as the window size decreases. But i want to have a approach where the table squeezes or squishes to fit the size of the window. Please find my code. hope i find an answer soon!

.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

You could take a look at adding bootstrap to your project. This could save you a lot of time and effort. Bootstrap is awesome for writing responsive code.

If you have added bootstrap, just do the following to achieve your table effect on mobile:

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

That will give you a scrollable table on mobile. If you do not want to go the bootstrap route, you could try the following with the HTML above:

<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>

That should do the trick. Check out this plunkr.

But really take a look at adding bootstrap.

Answer 2

Well, to make it responsive, you need to do major re-design, using bootstrap, or flexbox, or something else.

But you still can have a responsive table. Add the following code to your CSS, should work:

table {
    display: block;
}
tr {
    display: block;
}
td {
    display: inline-block;
}

If you don't like how it looks like and still want to maintain the table layout for desktop and have something responsive for mobile, here's another trick. You have the normal table layout for desktop, and for mobiles and desktops with less than 900 pixels window width it will be stacked vertically:

@media (max-width: 900px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: block;
    }
}

EDIT: For "squish" effect, you can do it like this:

@media (max-width: 900px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: inline-block;
        width: 32%;/* to have 3 columns */
    }
}

Edit 2: Here's a demo using the last edit. 2 things to notice:

1. Added box-sizing: border-box; to the "td".
2. Since we're using "display: inline-block;", for the inline-block to work as desired, all white-spaces between "td"s must be removed. Here's an example:

This:

<td>
    cell1
</td>
<td>
    cell2
</td>

Should be changed to:

<td>
    cell1
</td><td>
    cell2
</td>