table with first column fits content and second column overflow-x auto - html

Question

I'm trying to make a 2 columns table with the following properties :
the table must fit to its parent container
the first column must fit to its content
the second column content must be horizontally scrollable if it
exceed the table width.
► I began with the following code :
(css here is just to "see" the main container and the table - width: 500px is just for the example, it could be any value)
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is not ok : The table does not fit to its container
Point 2 is ok : first column fit to its content
point 3 not ok : as the table does not fit its container, I can't apply an overflow: auto for now
► the only way I found to make the table fit its container is to add the following css properties : table-layout: fixed & width: 100%
then I can add width:100%, display: inline-block & overflow: auto to the second column to make the content scrollable if it exceed the table width
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
table-layout: fixed;
width: 100%;
}
.two {
width:100%;
display: inline-block;
overflow: auto;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is now ok : The table fit to its container
Point 2 is not ok anymore : table-layout: fixed makes the two columns
point 3 now ok : the content of the second column is scrollable if its too long
► So now I'm looking for a solution to have the 3 points OK.
to get the closest to wha I need, I set width: 50px to the .one class, but in my project I can't do that as I have several tables with differents content size in the first column, so I need the first column's size to be set automatically to fit to the content as in the first snippet.
Any help ?

Answer 1

you can use word-break:break-all for .two
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
width: 100%;
}
.two{
word-break:break-all;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>