Issue
So i build this simple table: 
The Problem is, when i resize my browser to a certain amount, it starts looking like this:
I already tried to set tablel-layout:fixed. And now it resizes correctly, BUT the insides of the table are completely wrong, as you can see:
So now i really have no idea how to solve this problem and where to begin. Anyone has an idea? Here's the code so far:
<html lang="en">
<meta content="width=device-width, initial-scale=1.0">
<head>
<title>TestTable</title>
<link rel="stylesheet" href="..//css/GeneralStyle.css">
<link rel="stylesheet" href="..//css/RFQ.css">
<script src="..//js/RFQ.js"></script>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id = "content">
<div id="main2" class="main">
<h1 id="x2" class="x">X</h1>
<h1 class="title" id="T2">Project specification and target price</h1>
<table id="table_021">
<tr>
<th><b></b></th>
<th><b>Product Code</b></th>
<th><b>Extra Options</b></th>
<th><b>Quantity</b></th>
<th><b>Expected Offer Price (incl. Accessories)</b></th>
<th><b>Currency</b></th>
<th><b>Customer price </b></th>
</tr>
<tr>
<td><b>Code1</b> </td>
<td style="width: 40%">
<table style="width: 400px; margin-left: 0;">
<tr>
<td>XXX</td>
<td style="width: 17%"><input maxlength="4"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%">-Y</td>
</tr>
</table>
</td>
<td>
<table style="width: 180px; margin-left: 0;">
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
</table>
</td>
<td><input id="a2" type="number" min="0"></td>
<td><input id="a3" type="number" min="0"></td>
<td><select name="currency1" id="currency1">
<option value="1">Euro € </option>
<option value="2">USD $ </option>
</select></td>
<td><input id="a4" type="number" min="0"></td>
</tr>
<tr>
<td><b>Code2</b></td>
<td style="width: 40%">
<table style="width: 400px; margin-left: 0;">
<tr>
<td>XXX</td>
<td style="width: 17%"><input maxlength="4"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%">-Y</td>
</tr>
</table>
</td>
<td style="width: 18%">
<table style="width: 180px; margin-left: 0;">
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
</table>
</td>
<td><input id="a6" type="number" min="0"></td>
<td><input id="a7" type="number" min="0"></td>
<td><select name="currency2" id="currency2">
<option value="1">Euro € </option>
<option value="2">USD $ </option>
</select></td>
<td><input id="a8" type="number" min="0"></td>
</tr>
<tr>
<td><b>Code3</b></td>
<td style="width: 40%">
<table style="width: 400px; margin-left: 0;">
<tr>
<td>XXX</td>
<td style="width: 17%"><input maxlength="4"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%">-Y</td>
</tr>
</table>
</td>
<td>
<table style="width: 180px; margin-left: 0;">
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
</table>
</td>
<!--<td><form id="aa9"><input id="a9" type="text"></input></form></td>-->
<td><input id="a10" type="number" min="0"></td>
<td><input id="a11" type="number" min="0"></td>
<td><select name="currency3" id="currency3">
<option value="1">Euro € </option>
<option value="2">USD $ </option>
</select></td>
<td><input id="a12" type="number" min="0"></td>
</tr>
<tr>
<td><b>Code4</b></td>
<td style="width: 40%">
<table style="width: 400px; margin-left: 0;">
<tr>
<td>XXX</td>
<td style="width: 17%"><input maxlength="4"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td>-</td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%"><input maxlength="1"></input></td>
<td style="width: 8%">-Y</td>
</tr>
</table>
</td>
<td>
<table style="width: 180px; margin-left: 0;">
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
<tr>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
<td><input maxlength="3"></input></td>
</tr>
</table>
</td>
<!--<td><form id="aa13"><input id="a13" type="text"></input></form></td>-->
<td><input id="a14" type="number" min="0"></td>
<td><input id="a15" type="number" min="0"></td>
<td><select name="currency4" id="currency4">
<option value="1">Euro € </option>
<option value="2">USD $ </option>
</select></td>
<td><input id="a16" type="number" min="0"></td>
</tr>
</table>
<br>
<button id="c2" class="c next Button" onclick="check2()">Check and transmit</button>
</div>
</div>
</div>
</body>
</html>
table {
width: 80%;
border-collapse: collapse;
color: gray;
margin-left: 5%;
}
th, td {
border: 1px solid #ddd;
opacity:0.9;
text-align: center;
padding: 5px;
}
th {
background-color: white;
}
.main {
float: left;
width: 75%;
margin-top: 1%;
border-radius: 5px;
background-color: #ffffff;
margin-left: 2%;
}
.in {
font-size: 120%;
text-align: right;
width: 80%;
}
#profit, .title {
color: gray;
padding-left: 2%;
}
.x {
color: gray;
float: right;
margin-right: 3%;
}
.x, .title:hover {
cursor: pointer;
}
form {
margin:0;
}
#newmain {
margin-top: 180px;
background-color: white;
}
#optional {
display: none;
}
#x1 {
display: block;
}
.c {
float: right;
}
.overlay-content {
top: 2%;
}
#cmd {
float: right;
margin-top: 180px;
margin-left: 80%;
position: fixed;
}
/* did not work out
#table_021{
table-layout:fixed;
}
*/
.transmitsuccess {
color:green;
}
Solution
you should add a wrapper div over your table and make it overflow
<div class="table-wrapper">
<table></table>
</div>
In CSS
.table-wrapper {
overflow: scroll;
}
Answered By - hawks Answer Checked By - Katrina (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.