Having an issue with an HTML table that has 3 columns and specific restrictions:
- Column 1: fixed width, no text wrapping (small text)
- Column 2: allows text wrapping
- Column 3: contains descriptive long text with wrapping enabled
- A row should span the entire width of the page due to background coloring
- Column 3 must have a minimum width of 70%
- Column 2 should take up as much space as possible, but considering the restriction for Column 3, it should be, more or less, at maximum 30%
The provided code produces satisfactory results:
<!DOCTYPE html>
<html>
<body>
<table >
<tr style="background-color:red;color:blue;">
<td style="width:100px;">Jill</td>
<td>Smith</td>
<td style="min-width:70%;width:100%;">50</td>
</tr>
<tr >
<td style="width:100px;">Eve</td>
<td>Jackson</td>
<td style="min-width:70%;width:100%;">94</td>
</tr>
<tr>
<td style="width:100px;">John</td>
<td >Doe</td>
<td style="min-width:70%;width:100%;">80</td>
</tr>
</table>
</body>
</html>
However, when replacing the text in the second column of the second row (i.e. Jackson) with a longer text like:
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
The layout becomes distorted, with the second column appearing small and no obvious way to increase its width.