I would like to create a page like the one attached; tried it different ways using css but still not been able to get it to render it correctly.
How do I do it to display like this?

I would like to create a page like the one attached; tried it different ways using css but still not been able to get it to render it correctly.
How do I do it to display like this?

It is helpful if you provide what you've tried.
<style>
#MyTable {
width: 60%;
}
#MyTable td.bottomBorder {
border-bottom: 1px solid black;
}
#MyTable td.nowrap {
white-space: nowrap;
width: 10%;
}
#MyTable td {
line-height: 2em;
}
</style>
Simple table
<table id="MyTable">
<tr>
<td class="nowrap">First Name:</td>
<td class="bottomBorder"></td>
<td class="nowrap">Last Name:</td>
<td class="bottomBorder"></td>
</tr>
<tr>
<td>Address:</td>
<td class="bottomBorder" colspan="3"></td>
</tr>
<tr>
<td> </td>
<td class="bottomBorder" colspan="3"></td>
</tr>
<tr>
<td>City:</td>
<td class="bottomBorder" colspan="3"></td>
</tr>
<tr>
<td>Notes:</td>
<td class="bottomBorder" colspan="3"></td>
</tr>
<tr>
<td> </td>
<td class="bottomBorder" colspan="3"></td>
</tr>
<tr>
<td> </td>
<td class="bottomBorder" colspan="3"></td>
</tr>
</table>
I need to be able to enter information in these fields.
Use standard inputs and remove the input borders using CSS. I don't know of any styling that can produce the double and triple lines in your example. But there is nothing stopping you from looking around on the internet.
When I use standard input like textbox or input box then I don't get the nicely formatted aligned screen
The double and triple lines can be replaced with Textbox controls but, again, I don't get the format I am looking for.
When I use standard input like textbox or input box then I don't get the nicely formatted aligned screen The double and triple lines can be replaced with Textbox controls but, again, I don't get the format I am looking for.
You did not share any code so I have no idea what you're doing. I recommend taking the time to learn HTML and CSS basics. There are literally tons of HTML form examples on the internet.
https://getbootstrap.com/docs/4.0/components/forms/
Hi @MalamMalam-4042 ,
If you need nicely format, there are two ways:1. using css to align the center 2. use Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Please tell us what do you want to do and if you can't get the nicely format by yourself, post your current codes to us.
Best regards,
Yijing Sun
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
3 people are following this question.