Problem in adjusting table inside container in html/css

HTML & CSS
1

Hi Respected Members!
I am trying to adjust table inside my container in below code but the problem which i am facing is that table showing outside the main container when i entered data . I also tried Auto but its also producing same result. below is my code and screen short which showing table outside container . Second issue is that in firefox browser, table border are not displaying where as in Chrome table with clear border display.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Procedure Report</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="GENERATOR" content="CodeCharge Studio 5.1.1.18992">
</head>
<body>
<style>
.container{
   min-width: 1500px !important;
}
</style>
<div class="container">
        <div class="row justify-content-center">
<div class="col-md-12">
                <div class="card mt-5">
                  <div class="card-header" style="background-color: #3fbbc0;">
<h4>Procedure Wise Report</h4>
                    </div>
<div class="card-body">
 <table class="table table-bordered">
   <thead>
 <tr>	  
				   	
				    <th>S#</th>					  
				   <th>Service</th>
 				    <th>Type</th>
				     <th>Machine</th>
				    <th>Consultant</th>
                                    <th>MRNo</th>
				   <th>Patient Name</th> 
				  <th>Mobile No</th>		
                                        <th>Bill No</th>					  
				   <th>Bill Date</th>
 				    <th>Rate</th>
				     <th>Discount</th>
				    <th>Total</th>                                                                           
				                          
                                    
                                    <th>Hosp Share</th>
				   <th>Cons Share</th>                                                       
				    <th>Mach Share</th>  
  <th>Useable Cost</th>
  <th>Oper. Cost</th>                
 				     <th>Operator</th>
<th>Remarks</th>  
                                </tr>
                            </thead>

<!-- BEGIN Report rr1 -->

  <!-- BEGIN Section Report_Header --><!-- END Section Report_Header -->
  <!-- BEGIN Section Page_Header -->

 <!-- END Section Page_Header -->
  <!-- BEGIN Section Page_Footer -->
 
 <!-- END Section Page_Footer -->
  <!-- BEGIN Section name_Header --><!-- END Section name_Header -->
  <!-- BEGIN Section Detail -->
  <tr>
	<td><center>{Report_Row_Number} </td> 
        <td>{name} </td> 
  <td>{state_state} </td>   
  <td>{city_city} </td> 
<td>{docname} </td> 
   <td>{mrno} </td>
        <td>{name1} </td> 
    <td>{mobno} </td>     
    <td>{bilno} </td> 
   <td>&nbsp;{bilno1}</td> 
         
    <td><center>{price1} </td> 
    <td><center>{discunt} </td> 
    <td><center>{tot4} </td> 

   
  
    <td><center>{Expr1} </td> 
    <td><center>{Expr2} </td> 
    <td><center>{Expr3} </td> 
<td><center>{Expr4} </td> 
<td><center>{Expr5} </td> 
<td><center>{uname1} </td>
    <td><b><center>{remarks3} </td> 
  </tr>
 <!-- END Section Detail -->
  <!-- BEGIN Section name_Footer -->
  <tr>
    <td><b>Sub Total </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp;</td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
   
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
 
 <td><b><center>{Sum_price1} </td> 
    <td><b><center>{Sum_discunt} </td> 
    <td><b><center>{Sum_tot4} </td> 
   
    <td><b><center>{Sum_Expr1} </td> 
    <td><b><center>{Sum_Expr2}</td> 
    <td><b><center>{Sum_Expr3}</td> 
 <td><b><center>{Sum_Expr4}</td> 
 <td><b><center>{Sum_Expr5}</td> 
 <td>&nbsp; </td> 
    <td>&nbsp; </td> 
  </tr>
 <!-- END Section name_Footer -->
  <!-- BEGIN Section Report_Footer -->
  <!-- BEGIN Panel NoRecords -->
  <tr>
    <td colspan="18">No records</td> 
  </tr>
 <!-- END Panel NoRecords -->
  <tr>
    <td><b>Grand Total </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp;</td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
    <td>&nbsp; </td> 
 <td>&nbsp; </td> 
    <td>&nbsp; </td>
    <td><b><center>{TotalSum_price1} </td> 
    <td><b><center>{TotalSum_discunt} </td> 
    <td><b><center>{TotalSum_tot4} </td>  
    
    <td><b><center>{TotalSum_Expr1} </td> 
    <td><b><center>{TotalSum_Expr2}</td> 
    <td><b><center>{TotalSum_Expr3}</td> 
  <td><b><center>{TotalSum_Expr4}</td> 
  <td><b><center>{TotalSum_Expr5}</td> 
    <td></td> 
    <td></td>
  </tr>
 <!-- END Section Report_Footer -->
</table>
&nbsp;</p>
<!-- END Report rr1 -->
<p></p>
<p>&nbsp;</p>
</body>
</html>

123
1231141×479 98.6 KB

2

Have you tried this?

.container {
   width: 100%;
   overflow: auto;
}
3

As the <div> element containing the table has class ‘card-body’, I suggest trying this:

.card-body{
   overflow:auto;
}
4

yes it hiding table column field which out flow container and displaying till Cons. Share

5

same result, hiding last 4 columns

6

If you are using a touch-sensitive device, you can drag the table to the left to see the last columns (if you include the CSS in post #3).

7

It doesn’t hide the last 4 columns it allows them to scroll inside card boy which is the only sensible option because your table is about 2261px wide!.

1 Like