My approach involves using divs to mimic a table structure. Below is the header section of this table:
<div id="table-header">
<div id="header-row">
<div class="rate-rule-column s-boarder">
<div class="header-text ">Rate Rule</div>
</div>
<div class="rate-column s-boarder">
<div class="header-text">Rate</div>
</div>
<div class="qty-column s-boarder">
<div class="header-text">Qty</div>
</div>
<div class="copies-column s-boarder">
<div class="header-text">Copies</div>
</div>
<div class="amount-column s-boarder">
<div class="header-text">Amount</div>
</div>
</div>
</div>
The current setup relies on float: left for positioning these elements. However, an issue arises where the table line breaks into two lines when zooming in or out, although it works fine at 100% zoom level.
This break occurs between the divs themselves, not within individual cells. Applying whitespace: nowrap does not resolve the problem. Is there a method to prevent line breaks between the div elements?
Edit:
I have included the requested CSS code, with the key property being float: left.
.amount-column{
width: 130px;
height: 30px;
float: right;
}
.copies-column{
width: 69px;
height: 30px;
float: left;
}
.qty-column{
width: 150px;
height: 30px;
float: left;
}
.rate-column{
width: 150px;
height: 30px;
float: left;
}
.rate-rule-column{
width: 300px;
height: 30px;
float: left;
}