I am having trouble setting a minimum width for a table cell and enabling horizontal scrolling. I have tried using min-width but it doesn't seem to work. Can anyone provide some guidance on this issue? I came across this comment on Stack Overflow but it hasn't resolved my problem.
Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 50%;
overflow-x: scroll;
border: 1px solid red;
}
table {
table-layout: fixed;
border: 1px solid black;
width: 100%;
}
th, td{
border: 1px solid black;
min-width: 1000px;
}
</style>
<body>
<div>
<table>
<tr>
<th>nb b </th>
<th>agahbajh gae</th>
<th>nbb </th>
<th>agahajh gae</th>
</tr>
<tr>
<td>amame ban</td>
<td>20</td>
<td>amame ban</td>
<td>20</td>
</tr>
<tr>
<td>aahshu</td>
<td>23</td>
<td>aaajshu</td>
<td>23</td>
</tr>
</table>
</div>
</body>
</html>
Update:- After receiving a solution from @Emaro, I am now wondering how to set the widths of 4 columns as follows: 40%, 40%, 50%, 50% of the outer div.
Thanks