asked on

<Table> Change Sides (messes up content)

Hello all;
This code changes the sides that the table is
table {direction:rtl;}
table table table {direction:ltr;}

But, this messes up my content on the page.
As the center is a Table, so it changes it around as well.

What I would like to know is this:

Is there a way to make this code work with certain tables
And leaves the rest of the Tables alone.?

Or do I "not" need to use this. I think it would add a neat feature into the site
(Allow the members to change their page around).

Thanks All.
Carrzkiss

<style type="text/css">
<!--
table {direction:rtl;}
table table table {direction:ltr;}
-->
</script>

Open in new window

quincydude

you can add class to table so only table you want to have this feature be in the class

say you set the style to

table.rtltab {direction:rtl;}

you add the class attribute to the tables you ONLY want to have this feature on by
<table class="rtltab">

Wayne Barron

ASKER

I tried it and it did not work.
If you have gotten it to work, could you provide an example please?

This is what I have tried. (Demo sample)

Carrzkiss

<style type="text/css">
<!--
table.FarLeftTD {direction:rtl;}
table.FarLeftTD table.FarLeftTD table.FarLeftTD {direction:ltr;}
 
-->
</style>
</head>
 
<body>
<table width="400" border="1">
  <tr>
    <td class="FarLeftTD">Add some content here</td>
    <td>&nbsp;</td>
    <td class="FarLeftTD">This is the Right Side</td>
  </tr>
</table>

Open in new window

quincydude

Are you sure what this style does? It only sets the text direction.

What did you expected to see in your example? Like below?

<style type="text/css">
<!--
td.FarLeftTD {direction:rtl;}
td {direction:ltr;}
 
-->
</style>
</head>
 
<body>
<table width="400" border="1">
  <tr>
    <td >Add some content here.</td>
    <td> </td>
    <td class="FarLeftTD">This is the Right Side.</td>
  </tr>
</table>

Open in new window

Wayne Barron

ASKER

I do not think that you understand what it is that I am trying to accomplish.
The code below, will swap the Table Cells around.
Right - becomes - Left
Left - becomes -Right.

What I am trying to accomplish is a way to make it so that it will only effect
Certain cells and not all....
As in the Center cell should not be effected at all by the change

<style type="text/css">
<!--
table {direction:rtl;}
table table table {direction:ltr;}
-->
</style>
</head>
 
<body>
<table width="400" border="1">
  <tr>
    <td >This is the Left Side</td>
    <td>This is some text here, and it should never change </td>
    <td class="FarLeftTD">This is the Right Side.</td>
  </tr>
</table>

Open in new window

quincydude

Ok I understand now.
You can only apply direction to the table element but not TD to make the effect. So you cannot switch one rows direction and keep the next row on the same table. But you can manage direction on different table. Check the example.

<html>
<head>
<style type="text/css">
table.one
{
direction: rtl
}
 
table
{
direction: ltr
}
 
</style>
</head>
<body>
<table class="one">
<tr>
<td >1</td>
<td >2</td>
</tr>
</table>
 
<table>
<tr>
<td >1</td>
<td >2</td>
</tr>
</table>
 
</body>
</html>

Open in new window

Wayne Barron

ASKER

that is nice, but it is not going to do what I need it to do.

I think that the code that I provided will do what I need.
If i can find a way to make the <Form Fields> not swap sides.
When they changed sides, it messes it up real bad and makes the page very ugly.

But this is something that i have been told that people would like to have the ability to change.
So. I need to find a way to make it possible, without messing up my page in the process.

The whole site is Tables and 100% of the Attributes are CSS.

quincydude

I have said you cannot apply the effect on the first row but keep the 2nd row unchanged.
So if you want every line to be adjustable, probably you have to make a new table on every line. Which mean each table contains only one row.
I do not think the whole page will mess up if you just the class technique mentioned above. May be you better show us your real code to work on.

Wayne Barron

ASKER

Here you go.
I tried to make up something that is quite similuar to what I have going on.

When you run the code AS IS.
The 2 Table cells change (Right & LEft)
The Table in the Center Cell, changes, THis is not suppose to change.

Any idea's?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
table {direction:rtl;}
table table table {direction:ltr;}
-->
</style>
 
</head>
 
<body style="text-align:center">
<table name="MainTD" style="height:400px;">
  <tr>
    <td style="width:200px; border:1px #000000 double;">:Left Side: <br />
    Should change with :Right Side:</td>
    <td style="width:400px; vertical-align:top; text-align:left;">
 
<label>This table should not change</label>    
    <table name="CenTD" style="width:400px; border:1px double #000000;">
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
    </table>
    
    </td>
    <td style="width:200px; border:1px #000000 double;">:Right Side: <br />
    Should change with :Left Side:</td>
  </tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Wayne Barron

ASKER

I never though of that....
Thank You Thank You Thank you.

So, if I have say: 5 Columns, and want to swap around 3 of them.
table {direction:rtl;}
table table table{direction:ltr;}
(or)
5 Columns and want to swap 4 of them, it should be:
table {direction:rtl;}
table table table table{direction:ltr;}

Would that assumption be correct in theory?

quincydude

it's not really the case...

say you got the following layout
<table> --1st layer
<table> -- 2nd nested layer
<table> --3rd nested layer
</table>
</table>
</table>

table {direction:rtl;}
would only swap the 1st layer
and
table table table{direction:ltr;}
would just keep the content in the 3rd layer table in the direction left to right.
The above style do not do any affect on the 2nd table.

As I have suggested, you should use class to accomplish this.
Using the style
table {direction:ltr;}
table.rtltab{direction:rtl;}

and apply the class rtltab to any table you want to swap just like the example below. So if a table is not in the class, it will remain original. This style is independent of your page structures which is much easier for you to maintain.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
table {direction:ltr;} 
table.rtltab{direction:rtl;}
-->
</style>
 
</head>
 
<body style="text-align:center">
<table class="rtltab" name="MainTD" style="height:400px;">
  <tr>
    <td style="width:200px; border:1px #000000 double;">:Left Side: <br />
    Should change with :Right Side:</td>
    <td style="width:400px; vertical-align:top; text-align:left;">
 
<label>This table should not change</label>    
    <table name="CenTD" style="width:400px; border:1px double #000000;">
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
      <tr>
        <td>Left Side</td>
        <td>Right Side</td>
      </tr>
    </table>
    
    </td>
    <td style="width:200px; border:1px #000000 double;">:Right Side: <br />
    Should change with :Left Side:</td>
  </tr>
</table>
</body>
</html>

Open in new window

Wayne Barron

ASKER

I understand now.
Name the Main Table a Class. And not the others.
I completely understand the concept now.

Thank you for your time.

I love learning new things.
Awesome. CSS is pretty cool.
And am trying to implement it in my every day coding.

Thanks once again.
Carrzkiss

quincydude

Good to hear that :)
CSS is really good stuff

But I have mentioned something wrong

from my example
<table> --1st layer
<table> -- 2nd nested layer
<table> --3rd nested layer
</table>
</table>
</table>

The style
table {direction:rtl;}
does affect the 2nd table.

as If you specify only a tag as above, all the same tag will use this style as default unless other styles overrides it.

But if it is
body table {direction:rtl;}

then, only the first layer will be set to the style.

&lt;Table&gt; Change Sides (messes up content)

<Table> Change Sides (messes up content)