I'm facing an issue with two tables on my HTML page that are aligned horizontally - one on the left and the other on the right. They look good when the browser is maximized but lose their horizontal alignment when the window size is reduced. I have applied CSS to both tables as follows:
Table 1
.viewTable {
background-color: #eeeff4 !important;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 79% ;
margin-left:0;
float: left;
clear:both;
}
Table 2
.settleViewTable {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: auto;
margin-right:10px;
margin-left:10px;
float: right;
}
I'm looking for a better solution to maintain alignment even when the window size is reduced. Any suggestions?