Problem in adjusting table inside container in html/css

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">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Procedure Report</title>
  <link href="" rel="stylesheet">
<meta name="GENERATOR" content="CodeCharge Studio">
   min-width: 1500px !important;
<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 class="card-body">
 <table class="table table-bordered">
				   <th>Patient Name</th> 
				  <th>Mobile No</th>		
                                        <th>Bill No</th>					  
				   <th>Bill Date</th>
                                    <th>Hosp Share</th>
				   <th>Cons Share</th>                                                       
				    <th>Mach Share</th>  
  <th>Useable Cost</th>
  <th>Oper. Cost</th>                

<!-- 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 -->
	<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><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> 
 <!-- END Section Detail -->
  <!-- BEGIN Section name_Footer -->
    <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><b><center>{Sum_price1} </td> 
    <td><b><center>{Sum_discunt} </td> 
    <td><b><center>{Sum_tot4} </td> 
    <td><b><center>{Sum_Expr1} </td> 
 <td>&nbsp; </td> 
    <td>&nbsp; </td> 
 <!-- END Section name_Footer -->
  <!-- BEGIN Section Report_Footer -->
  <!-- BEGIN Panel NoRecords -->
    <td colspan="18">No records</td> 
 <!-- END Panel NoRecords -->
    <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><b><center>{TotalSum_price1} </td> 
    <td><b><center>{TotalSum_discunt} </td> 
    <td><b><center>{TotalSum_tot4} </td>  
    <td><b><center>{TotalSum_Expr1} </td> 
 <!-- END Section Report_Footer -->
<!-- END Report rr1 -->

Have you tried this?

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

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


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

same result, hiding last 4 columns

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).

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.