如何在表单上的字段下划线，但单元格中的文本除外

Question

I've been asked to make a form that has labels in cells (not underlined) followed by an underlined area that indicates where someone is supposed to put information. I don't personally like this design approach, but it is what I've been asked to do.

Something like this:

First Name: ________
Last Name: ________
Street Address: ________

In other words, everything in the table cell is underlined except the label and the trailing space character.

The labels contain varying information and clearly will not align. However, all the underlines should right-align in their respective cells.

Here's a pen that hopefully illustrates what I'm trying to do. https://codepen.io/timmerbu/pen/pojMypE?editors=1100

 html { font-size: 16px; } body { background: #9f9; } div { background: #fff; padding: 1rem; margin: auto; width: 200px; } table, tr, td { margin: 0; padding: 0; border-collapse: collapse; } table { width: 100%; } tr:nth-child(odd) { background: #fd4; } td { padding: 3px; }

 <div> <p>This is a test.</p> <table> <tbody> <tr> <td>Word: __________________</td> </tr> <tr> <td>Word word: ______________</td> </tr> <tr> <td>Word word word: _________</td> </tr> <tr> <td>Word word word word: ____</td> </tr> </tbody> </table> <p>End of test.</p> </div>

Answer 1

You can try this code

 <p style="width: 250px; display: table;"> <span style="display: table-cell; width: 80px;">First Name:</span> <span style="display: table-cell; border-bottom: 1px solid black;"></span> </p>

Answer 2

A little non-formal, but it works. Removing the underscore and adding it back with a CSS Pseudo class, while having the <span> for the text has a background and z-index that puts the underline behind it. You can change the underline placement by adjusting the top: -4px; .

 html { font-size: 16px; } body { background: #9f9; } div { background: #fff; padding: 1rem; margin: auto; width: 200px; } table, tr, td { margin: 0; padding: 0; border-collapse: collapse; } table { width: 100%; } tr:nth-child(odd) { background: #fd4; } td { padding: 3px; } tbody td:after { border-bottom: 1px solid #f50909; content: ""; width: 100%; height: 1px; display: block; position: relative; top: -4px; } td span { display: inline-block; position: relative; z-index: 2; padding-right: 5px; background: #FFF; } tr:nth-child(odd) span { background: #FD4; }

 <div> <p>This is a test.</p> <table> <tbody> <tr> <td><span>Word:</span></td> </tr> <tr> <td><span>Word word:</span></td> </tr> <tr> <td><span>Word word word:</span></td> </tr> <tr> <td><span>Word word word word:</span></td> </tr> </tbody> </table> <p>End of test.</p> </div>

Answer 3

I think with the underlined field, you would like the user to enter the text too... I suggest the following HTML

You can use a <span> <td> <p> or any other suitable container tag, I am using <div>

 <div> First Name: <input type="text" style="border: none; border-bottom: solid 1px black; width: 200px" /> </div>

You can put the styling in a CSS as well

---

UPDATED

Right align all the underlines

 <table style="width: 300px"> <tr> <td> <div style="width: 100%; float: left"> <span style="background-color: white">First Name: </span> <hr style="margin-top: -4px;/> </div> </td> </tr> <tr> <td> <div style="width: 100%; float: left"> <span style="background-color: white">Last Name: </span> <hr style="margin-top: -4px;/> </div> </td> </tr> <tr> <td> <div style="width: 100%; float: left"> <span style="background-color: white">Age: </span> <hr style="margin-top: -4px;/> </div> </td> </tr> <tr> <td> <div style="width: 100%; float: left"> <span style="background-color: white">Gender: </span> <hr style="margin-top: -4px;/> </div> </td> </tr> </table>

Answer 4

simply use use css after?

 .underlined:after { content: '______________' }

 <p class="underlined">First Name: </p> <p class="underlined">Last Name: </p> <p class="underlined">Street Address: </p>