Hi Kady,
By their nature, a table with fixed pixel widths will not be responsive. You can either remove the pixel width declarations, or replace them with percentage widths to allow them to resize.
If any <table> tag (table wrapper), <tr> tag (table row) or <td> tag (table column) has a fixed width declaration, the table will not be responsive. These non-responsive html tags will look something like:
<table width="1000">or<td style="width: 300px;">or<tr style="width: 300px;">
A table or cell of a table will never be any more or less than the width and height declarations which are set. So if a table column is set to be 300px wide, it will always be 300px wide.
Here is an example of a non-responsive, 2 column table:
<table style="width: 600px;"> /* a table with a set width of 600px */
<tr>
<td style="width: 300px;"> /* 2 columns in this table row with set widths of 300px */
This is some content
</td>
<td style="width: 300px;">
This is more content
</td>
</tr>
</table>
The fixed pixel width values set in the <table> tag and <td> tags are not allowing the table to be any less than what is set. Rather, we want to set the width values to be relative to their container, which we can do with percentage values.
A responsive 2 column table table would look more like:
<table style="width: 100%;"> /* a table with a width of 100% */
<tr>
<td style="width: 50%;"> /* 2 columns in this table row with widths of half of the entire row */
This is some content
</td>
<td style="width: 50%;">
This is more content
</td>
</tr>
</table>
Notice the percentage width values. We are setting the <table> to have a width of 100%, which will fill 100% of the container it lives within. As this container resizes, the table will also resize to fit 100% of the container (the entire container). We are also setting the table columns width to be 50% (each cell takes up half of the table), so as the table resizes, this 50% will be relative to the size of the table and allow the cells to fit on a smaller screen size.
Note that the sum of the table columns equal 100%, so if you want a three column table acting responsive, it would have table columns with widths of 33%:
/* Example three column responsive table */
<table style="width: 100%;"> /* This is the table wrapper */
<tr> /* This is a table row (tr) */
<td style="width: 33%;">Column 1 Content</td> /* This is a table column (td) */
<td style="width: 33%;">Column 2 Content</td>
<td style="width: 33%;">Column 3 Content</td>
</tr>
</table>
For the best compatibility, make sure you use CSS width declarations. This means using
<table style="width: 100%;">
/* rather than */
<table width="100%">
I hope this helps!