宽度窄时如何告诉浏览器在正确的位置缩小表格单元格

Question

Confusing title, I know. If anyone has a suggestion that is more suitable please tell me.

I have a table which has a very long content in the second column and that makes the content of the last column overflow even though there is enough space in the second column because content gets wrapped. How do I tell the browser to shrink the space of the second column instead of overflowing on the last one?
I feel like this has something to do with padding.

Here is my table and as you can see the right column is overflowing. Now I want the browser to remove space from the right of the second column (with the new place thanks to the word-wrap) first (dashed red), then from the padding (dashed blue) until suppressing the padding totally and after that not overflowing text but blocking the table width and not shrinking the table any more (like min-width does).
There is a lot of blank space that can be removed before overflowing. I want the table to be dynamic, and I need exactly the default behaviour except that it doesn't seem to be optimized for my specific use case.

 table { width: 100%; border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 5%; } td:first-child, th:first-child { padding: 10px; }

 <table> <tr> <th>#</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>10</td> <td>...\ErrorHandlerMiddleware->App\Application\Middleware\{closure}(...)</td> <td>...\HelloAction.php:42</td> </tr> <tr> <td>11</td> <td>...\MiddlewareDispatcher.php:128$25a->handle(...)</td> <td>...\ErrorHandlerMiddleware.php:91</td> </tr> </table>

Answer 1

You can either apply word-wrap: break-word; to the td element or set a smaller, fixed padding

See the snippet below:

 table { width: 100%; border-collapse: collapse; } td, th { border: 1px solid black; } td:first-child, th:first-child { padding: 10px; } td { word-wrap: break-word; }

 <table> <tr> <th>#</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>10</td> <td>...\ErrorHandlerMiddleware->App\Application\Middleware\{closure}(...)</td> <td>...\HelloAction.php:42</td> </tr> <tr> <td>11</td> <td>...\MiddlewareDispatcher.php:128$25a->handle(...)</td> <td>...\ErrorHandlerMiddleware.php:91</td> </tr> </table>