How to transform only one table column into responsive - html-table

Question

I have a table with 3 columns (used to display an album songs). Number, Track Title and Artist. I wanted to keep the column of Number and Artist small, and allow Title to place most of the space of the column. And I wanted to make it responsive for mobile.
I managed to make it right with white-space: nowrap, overflow: auto, and adding a max-width in the table td. This looks nice in a Desktop with a large display, but it seems that in mobile screens the width:100% used in the table does not apply, because the table overflows the limit of the screen.
How can I fix it and display the full table in small screens? Is it only possible with #media?
The work done is here:
table {
width: 100%;
}
table th {
background: #E4E4E4;
line-height: 23px;
padding-top: 6px;
color: #626262;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 11px;
border: 1px solid #DBDBDB;
}
table td {
font-size: 13px;
line-height: 22px;
background: #F7F7F7;
border-top: 1px solid #F3F3F3;
white-space: nowrap;
overflow: auto;
max-width: 300px;
}
table td,
table th {
text-align: left;
padding: 3px 20px;
}
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Nº</th>
<th class="largura-min">Title</th>
<th>Artist</th>
</tr>
<tr>
<td>1</td>
<td>I need this column placing most of this space / Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td>
<td>ARTIST</td>
</tr>
<tr class="even">
<td>2</td>
<td>TITLE 2</td>
<td>I NEED A SMALLER ARTIST SPACE / SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td>
</tr>
</tbody>
</table>

Answer 1

When you say that width:100% is ignored, do you mean that the table's width becomes larger than the screen width and a horizontal scrollbar appears?
Give each column a different max-width in px units, in the same proportion of space you want them to take up. I removed a bunch of stuff from your example just to make experimenting easier. Resize the output frame on https://jsfiddle.net/dgrogan/ye2wm4yp/2/
But note that Firefox doesn't seem to support overflow:auto on table cells. If you need to support FF you'll have to figure that out. Didn't test Edge.
Grid might support this use case better than tables.
let reducer = (sum, current) => sum += current;
let cells = Array.from(document.querySelectorAll("tr:first-child td"));
let abs_widths = cells.map(cell => cell.offsetWidth);
let total_width = abs_widths.reduce(reducer);
let pct_widths = abs_widths.map(w => Math.round(1000 * w / total_width) / 1000);
let specified_widths_px = cells.map(cell => parseInt(getComputedStyle(cell).maxWidth));
let total_spec_widths = specified_widths_px.reduce(reducer);
let specified_widths_pct = specified_widths_px.map(px => Math.round(1000 * px / total_spec_widths) / 1000);
log.innerHTML = `${abs_widths}
<br>${pct_widths} <-- current column ratio
<br>${specified_widths_pct} <-- specified column ratio
`;
table {
width: 100%;
}
table td {
font-size: 13px;
line-height: 22px;
white-space: nowrap;
overflow: auto;
padding-right: 0px;
outline: 1px solid lime;
}
td:nth-child(1) {
max-width: 10px;
}
td:nth-child(2) {
max-width: 50px;
}
td:nth-child(3) {
max-width: 35px;
}
<table cellpadding="0" cellspacing="0">
<tr>
<td>Nº</td>
<td class="largura-min">Title</td>
<td>Artist</td>
</tr>
<tr>
<td>1</td>
<td>I need this column placing most of this space / Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td>
<td>ARTIST</td>
</tr>
<tr class="even">
<td>2</td>
<td>TITLE 2</td>
<td>I NEED A SMALLER ARTIST SPACE / SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td>
</tr>
</table>
<div id=log></div>