Jump to content

Multiple alignments in css tables


Recommended Posts

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;}
  • Like 1
Link to post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites
<!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 post
Share on other sites

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 post
Share on other sites
<!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 by dsonesuk
Link to post
Share on other sites

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 post
Share on other sites

 

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...