Q:

html - how to prevent table column collapse on resizing?

I have the following html page.

#dash-board-container {
  height: 100%;
  width: 100%;
}

.quote_list_container {
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

table {
  table-layout: fixed;
  white-space: nowrap;
  width: 100%;
}

tr td {
  border: solid 1px #000;
  white-space: nowrap;
  overflow: hidden;
  min-width: 100px;
}

tr th {
  overflow: hidden;
  white-space: nowrap;
  border: solid 1px #000;
  min-width: 100px;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="dash-board-container">
      <div class="quote_list_container">
        <table>
          <colgroup>
            <col width="300" />
            <col width="100" />
            <col width="100%" />
          </colgroup>
          <thead>
            <tr>
              <th>Names</th>
              <th>Names</th>
              <th>Names</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ggggggggg</td>
              <td>ggggggggg</td>
              <td>ggggggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

When I resize window to the left, the last column gets 0px width and then, if I continue resizing, it starts scrolling. Setting the last column width to 100% is used to prevent resizing of other columns on table resize.
What can I do to prevent getting the last column collapsed? Instead of that I want to minimize the last column to only fit the content width and then start scrolling.

A:

All you need to do is set the overflow on "tr td" to Auto (Enables scrolling). Then just choose a minimum width for the entire table (To prevent resizing). I chose a width of 700px (300 + 100 + 300).
See code below for a working example.

#dash-board-container {
            height: 100%;
            width: 100%;
        }

        .quote_list_container {
            max-height: 100%;
            max-width: 100%;
            overflow: auto;
        }

        table {
            table-layout: fixed;
            width: 700px;
        }

        tr td {
            border: solid 1px #000;
            overflow: auto;
            white-space: nowrap;
            overflow: hidden;
            max-width: 300px;
        }

        tr th {
            overflow: hidden;

            white-space: nowrap;
            border: solid 1px #000;
            min-width: 100px;
        }

        table td + td + td {
         width:300px;
        }
<!DOCTYPE html>
<html>

<body>
<div id="dash-board-container">
    <div class="quote_list_container">
        <table>
            <colgroup>
                <col width="300"/>
                <col width="100"/>
                <col width="300"/>
            </colgroup>
            <thead>
            <tr>
                <th>Names</th>
                <th>Names</th>
                <th>Names</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ggggggggg</td>
                <td>ggggggggg</td>
                <td>ggggggggg</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

