2
Here is the implementation with your code by applying the white-space: nowrap; property to the label selector in the <style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Details</title>
<style>
.employee-info {
display: flex;
justify-content: space-around;
}
.table-border-end {
height: 50px;
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap; /* Prevents the label from breaking into multiple lines */
}
.requestInfo {
padding-top: 5px;
}
.flex {
display: flex;
}
.requestInfo-flex-div-1 {
width: 37mm;
}
.requestInfo-flex-div-4,
.requestInfo-flex-div-6 {
width: 300px;
border-bottom: solid 1px black;
text-align: center;
margin-left: 5px;
}
.modelData {
font-size: 12px;
}
</style>
</head>
<body onload="window.print();">
<div class="wrapper" style="height: 800px; width: 1000px;">
<div class="form-container">
<div class="form">
<form>
<table>
<tr>
<td style="width:200px;padding-left:60px;">
<label>Emp. ID:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-6 modelData"></label>
</td>
<td style="width:200px;">
<label>:TEST TEST_TEST</label>
</td>
</tr>
<tr>
</tr>
<!-- Continue adding more rows as needed -->
</table>
</form>
</div>
</div>
</div>
</body>
</html>
Please if it's Ok for you accept the solution to close the subject.
Regards,
BENCHAABAN Ali
1 ok can you show me how to use white-space: normal|nowrap|pre|pre-wrap|pre-line;
on my sample please
can you show me how to use it
1 Hello,
To achieve this you use white-space property of CSS. This property forces the contents of th to display in one line. There are many property values that exist in the white-space function.
white-space: normal|nowrap|pre|pre-wrap|pre-line;
Try this example in jsfiddle uses white-space property to prevent cell wrapping using CSS.
https://jsfiddle.net/alibenchaaban/wmhudk4n/5/
Regards,
1 so how to modify it
please can you show me if possible please
1 If I understand what you are saying then the problem is that there is not enough room for all of it to be in one line. The table cell for The Reason of Resignation: has width:200px and that apparently is too small. You must make the horizontal space larger somehow.