goonerray71 Posted February 10, 2015 Share Posted February 10, 2015 How can I set different text alignments within the same line of a table? For instance, the line starts with text aligned left but all the table columns needs to be aligned right. This is the text on the left 123.00 45.00 123.99 Another line 1.50 100.00 0.90 Above is rought example Link to comment Share on other sites More sharing options...
Ingolme Posted February 10, 2015 Share Posted February 10, 2015 Give a class name to your <td> elements. Then you can use CSS to set the text-align property to left or right based on which class you used. For example: <tr> <td class="text">This is a line of text</td> <td class="number">123.00</td> <td class="number">45.00</td> <td class="number">123.99</td></tr> In your stylesheet: td.text { text-align: left;}td.number { text-align: right;} 1 Link to comment Share on other sites More sharing options...
tejasamrute Posted February 10, 2015 Share Posted February 10, 2015 table td { text-align:right;}table td.left { text-align:left;}<table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="left">This is the text on the left </td> <td>123.00</td> <td>45.00</td> <td>123.99</td> </tr> <tr> <td class="left">Another line</td> <td>1.50</td> <td>100.00 </td> <td>0.90</td> </tr> </table> Link to comment Share on other sites More sharing options...
goonerray71 Posted February 12, 2015 Author Share Posted February 12, 2015 thank you for your help, but I still have trouble trying to create the following: SHIRTS (6 May) These are available now, TIES These are available soon Worn New Soiled Once 1 Wh 4 Clean.................. £5.00 £1.50 2 1 Clean................. £4.50 £1.00 £1.50 3 2 Worn................. none none .50 Here I need an image to appear centred in table 4 Bl 2 Blue..................... £6.50 £3.50 5 3 Blue..................... £6.50 £5.00 £5.50 These items are sold as described. Full refund obtainable on return of items in an undamaged condition. There are 6 columns - 1, 2 and 3 are aligned left, 4, 5 and g aligned right and may contain words and figures. Column 3 has dots across to first price. Can this all be achieved in CSS? Thanks for any help offered. Link to comment Share on other sites More sharing options...
Ingolme Posted February 12, 2015 Share Posted February 12, 2015 You haven't shown us an example of your code. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 13, 2015 Share Posted February 13, 2015 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> .table01 th:nth-child(6) span {display: block;} .table01 { margin: 0 auto;} .table01 td {padding: 5px;} .table01 tr td:nth-child(1), .table01 tr td:nth-child(2) {width:40px;} .table01, .table01 td{border-spacing: 0; border-collapse: collapse; border: 1px solid blue;} .table01 tr td:nth-child(3) {max-width: 200px; overflow: hidden;} .table01 tr td:nth-child(3):after{content:".............................................................."; } .table01 tr td:nth-child(3) ~ td {text-align: right; min-width:50px;} .table01 tr:nth-child(4) td {text-align: center; } </style> </head> <body> <table class="table01"> <thead> <tr> <th></th> <th></th> <th></th> <th>New</th> <th>Soiled</th> <th>Worn <span>Once</span></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Wh 4</td> <td>Clean</td> <td>£5.00 </td> <td>£1.50</td> <td></td> </tr> <tr> <td>2</td> <td>1</td> <td>Clean</td> <td>£4.50</td> <td>£1.00</td> <td>£1.50</td> </tr> <tr> <td>3</td> <td>2</td> <td>Worn</td> <td>none</td> <td>none</td> <td>£0.50</td> </tr> <tr> <td colspan="6"><img src="Untitled-2.jpg" width="40" height="10" alt="Untitled-2"/> </td> </tr> <tr> <td>4</td> <td>BI 2</td> <td>Blue</td> <td>£6.50</td> <td>3.50</td> <td></td> </tr> <tr> <td>5</td> <td>3</td> <td>Blue</td> <td>£6.50</td> <td>£5.00</td> <td>£5.50</td> </tr> </tbody> </table> </body></html> Link to comment Share on other sites More sharing options...
goonerray71 Posted February 16, 2015 Author Share Posted February 16, 2015 Many thanks dsonesuk. That works really well, except that I don't want the headings bold or the 2-line heading centred on the space as a span. I can change the data to td instead of th but then I get the dots in column 3 which I don't want on either of the two head lines. Any suggestions? Your help is really appreciated. cheers, Goonerray71 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2015 Share Posted February 16, 2015 (edited) <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <style type="text/css"> .table01 th:nth-child(6) span {display: block;} .table01 { margin: 0 auto;table-layout: fixed;} .table01 td {padding: 5px;} .table01 tr td:nth-child(1), .table01 tr td:nth-child(2) {width:40px;} .table01, .table01 td, .table01 th:nth-child(3) ~ th {border-spacing: 0; border-collapse: collapse; border: 1px solid blue; } .table01 th:nth-child(3) ~ th {font-weight: lighter; white-space: pre-line;} .table01 th:nth-child(6){max-width: 50px;} .table01 tr td:nth-child(3) {max-width: 200px; overflow: hidden;} .table01 tr td:nth-child(3):after{content:".............................................................."; } .table01 tr td:nth-child(3) ~ td {text-align: right; min-width:50px;} .table01 tr:nth-child(4) td {text-align: center; } </style> </head> <body> <table class="table01"> <thead> <tr> <th></th> <th></th> <th></th> <th>New</th> <th>Soiled</th> <th>Worn Once</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Wh 4</td> <td>Clean</td> <td>£5.00 </td> <td>£1.50</td> <td></td> </tr> <tr> <td>2</td> <td>1</td> <td>Clean</td> <td>£4.50</td> <td>£1.00</td> <td>£1.50</td> </tr> <tr> <td>3</td> <td>2</td> <td>Worn</td> <td>none</td> <td>none</td> <td>£0.50</td> </tr> <tr> <td colspan="6"><img src="Untitled-2.jpg" width="40" height="10" alt="Untitled-2"/> </td> </tr> <tr> <td>4</td> <td>BI 2</td> <td>Blue</td> <td>£6.50</td> <td>3.50</td> <td></td> </tr> <tr> <td>5</td> <td>3</td> <td>Blue</td> <td>£6.50</td> <td>£5.00</td> <td>£5.50</td> </tr> </tbody> </table> </body></html> Note: the line break to separate Worn Once, this is important. Edited February 16, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
goonerray71 Posted February 19, 2015 Author Share Posted February 19, 2015 Many thanks dsonesuk I am still having a problem with the headings being centred; I need them ranged right. Also, I don't want the last column head centred on the single line of the first two. Ideally they could be treated as text lines, ranged right, but without the dots in the third column. Cheers, Goonnerray Link to comment Share on other sites More sharing options...
dsonesuk Posted February 21, 2015 Share Posted February 21, 2015 I am still having a problem with the headings being centred; I need them ranged right Then you would adjust the css that aligns td element beyond the third, to target th elements as well. (clue it uses text-align: right;) Ideally they could be treated as text lines, ranged right, but without the dots in the third column. ?? From what i can see, there WILL NOT BE any dots in third column of header row, as it is only targets td elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now