0

I am trying to give min-width to table cell and want horizontal scrolling but min-width is not working here,can anyone please help? I have seen this comment also on stack overflow but it is not solving my problem. Code is this : 

<!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:- As my question has been answered by @Emaro. Now i want to know that what if i want to give width to 4 col. as :- 40%,40%,50%,50% of outer div.
Thanks

ninja
  • 1
  • 2

1 Answers1

1

If you limit the table to 100%, you won't be able to scroll it horizontally. Change it to auto and it should work (if I understood correctly).

div {
   width: 50%;
   overflow-x: scroll;
   border: 1px solid red;
}

table {
    table-layout: fixed;
    border: 1px solid black;
    width: auto; /* 100% is relative to the parent div */
}

th, td {
    border: 1px solid black;
    min-width: 1000px;
}
<!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>
<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>
Emaro
  • 1,397
  • 1
  • 12
  • 21
  • what if i want to give width to each cell in terms of percentage? How can i do that? like 4 cols should be:-40%,40% 50%,50% of the outer div? – ninja Jun 23 '21 at 08:19