<style>
        table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

  @media (max-width: 768px){

    tr th:nth-child(2),tr td:nth-child(2){

      display:none;
    }

  }
    </style>

Not what you asked for, but how about making the table horizontally scrollable?

The scrollbar will only appear when the window cannot fit the content if you use overflow-x: auto.

table,
th,
td,
tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
.hscroll {
  overflow-x: auto;
}
.example {
  white-space: nowrap;
}

<div class="hscroll">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</div>

You can use n-th child to manage table columns.

th:nth-child(2) { display:none; }

Use css :nth-child() and inside media query write styles for hiding columns:

table, th, td, tr{
  border:1px solid black;
}

table {
  width:100%;
}

@media all and (max-width: 768px){
  table tr th:nth-child(2),
  table tr td:nth-child(2) {
    display: none;
  }
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </tbody>
</table>

If you use nth-child, it will cause issues later when you add/remove more th/td's. Better use a class which you can reuse in your entire application.

<table>
<th>A</th>
<th class="hide-on-mobile">B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td class="hide-on-mobile">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hide-on-mobile">Jackson</td> 
    <td>94</td>
  </tr>
</table>

@media (max-width: 768px){
    hide-on-mobile{
      display:none;
    } 
  }

The proper way is using col elements with visibility: collapse.

<colgroup>
  <col />
  <col />
  <col />
</colgroup>

col:nth-child(2) {
  visibility: collapse;
}

table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
col:nth-child(2) {
  visibility: collapse;
}

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

This way will work properly even if you use colspan.

However, note the layout of the table will be calculated before hiding the columns. And at the end, the remaining columns won't grow to make the table respect width: 100%. As described in Dynamic effects, this avoids expensive re-layout operations. To compensate this, you can increase the width of the table beyond 100%.

div {
  overflow: hidden;
  margin: 20px 0;
}
table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
  table-layout: fixed;
}
table.grow {
  width: 150%;
}
col.hidden {
  visibility: collapse;
}

<div>
  Full table
  <table>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column
  <table>
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column and enlarging table
  <table class="grow">
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>

To remove the second column:

table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
}

table,
th,
td,
tr {
  border: 1px solid black;
}

table {
  width: 100%;
}

@media (max-width: 900px){ /* use your media breakpoint */
  table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
  }
}

<table>
  <tr>
    <th>A</th>
    <th id="foo">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

JSFiddle

Note: your HTML is not valid - th must also be inside the tr element.

If you must use html tables I would recommend using stacktable.js. Otherwise use css display tables.

Since everyone goes straight forward, I would like to recommend you bootstrap - this would help you in many situations when dealing with responsive design. After installing it, you will have to modify your code like this:

<table>
  <tr>
    <th>A</th>
    <th class="hidden-xs">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden-xs">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hidden-xs">Jackson</td> 
    <td>94</td>
  </tr>
</table>

You can read more about it at this question.