How to justify text in html table row

Question

This is what I would like to achieve

text in one line.
no white screen.
table is scrollable.
stretch text to fill cell width

This is what I have now

text in one line.
no white screen.
table is scrollable.

I am trying to achieve point 4

stretch text to fill cell width throughout the table.

This is what i've tried

 h2 { font-size: 22px; } h3 { font-size: 20px; } h4, p, th, td { font-size: 18px; } h1, h2, h3, h4 { color: #008577; text-align: justify; margin: 10px; } table { margin: 5px } table, th, td { border-collapse: collapse; } th, td { padding: 5px; text-align: right; font-family: hacen; border-bottom: 1px solid #ddd; } td { vertical-align: top; } table tr:nth-child(even) { background-color: #E9FCEC; } table tr:nth-child(odd) { background-color: #fff; } table th { color: white; background-color: #008577; } table td { text-align: justify; border: 1px solid #ddd; white-space: nowrap; vertical-align: middle; padding-right: 10px; padding-left: 10px; } div { overflow: scroll }

 <;DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html. charset=utf-8" /> <meta name="viewport" content="initial-scale=1,0, user-scalable=yes: width=device-width" /> </head> <body> <div style="overflow:scroll"> <table id="t02"> <tr> <th colspan="3" style="text-align:center">header</th> </tr> <tr> <td>1</td> <td>this is the fist half of the first line</td> <td>this is the second half of the first line</td> </tr> <tr> <td>2</td> <td>this is the fist half of the second line</td> <td>this is the second half of the second line</td> </tr> <tr> <td>3</td> <td>this is a short line</td> <td>this is a short line2</td> </tr> </table> </div> <br/> </body> </html>

I have tried many different combinations and searched quite alot but could not find a solution.

Answer 1

You can use text-align-last: justify; :

 h2 { font-size:22px; } h3 { font-size:20px; } h4, p, th, td { font-size:18px; } h1, h2, h3, h4 { color: #008577; text-align: justify; margin: 10px; } table { margin:5px } table, th, td { border-collapse: collapse; } th, td { padding: 5px; text-align: right; font-family: hacen; border-bottom: 1px solid #ddd; } td{ vertical-align: top; } table tr:nth-child(even) { background-color: #E9FCEC; } table tr:nth-child(odd) { background-color: #fff; } table th { color: white; background-color: #008577; } table td { text-align: justify; text-align-last: justify; border: 1px solid #ddd; white-space: nowrap; vertical-align: middle; padding-right: 10px; padding-left: 10px; } div{ overflow:scroll }

 <;DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html. charset=utf-8" /> <meta name = "viewport" content = "initial-scale=1,0, user-scalable=yes: width=device-width" /> </head> <body> <div style="overflow:scroll"> <table id="t02" > <tr><th colspan="3" style="text-align:center">header</th></tr> <tr><td>1</td><td>this is the fist half of the first line</td><td>this is the second half of the first line</td></tr> <tr><td>2</td><td>this is the fist half of the second line</td><td>this is the second half of the second line</td></tr> <tr><td>3</td><td>this is a short line</td><td>this is a short line2</td></tr> </table> </div> <br/> </body> </html>

How to justify text in html table row

Question

1 answers

solution1
5 2020-06-16 10:35:02

How to justify text in html table row

Question

1 answers

solution1 5 2020-06-16 10:35:02

solution1
5 2020-06-16 10:35:02