Single edge table

[Xabriña]

Hello everybody.

I am trying to create a tiddler to put in a table, of two columns and a cell, lyrics of songs together with their translation.

I would like to do it with no cell borders except the center line between the two columns. I've been looking at the code to make an Eric Shulman borderless table that appears in Mohammad's TW-Scripts but I don't know how it could be modified to do what I need. Anyone know a way to do it ???

Thanks in advance.

[Brian Radspinner]

You can start with this code to play around...

<table class="lyrics">
<tr>
<td>

Original lyrics go here&hellip;
</td>
<td class="trans">

Translation goes here&hellip;
</td>
</tr>
</table>

<style>
table.lyrics,
table.lyrics tr,
table.lyrics tr td { border: none; }
table.lyrics tr td.trans { border-left: 1px solid #000; }
</style>

[Xabriña]

Thank you!!!

It's what I was looking for. How could you make the two texts separate from the center line?

[Xabriña]

I tried the following syntax without success:

<style>

table.lyrics,

table.lyrics tr,

table.lyrics tr td { border: none; }

table.lyrics tr td.trans { border-left: 2px solid green;  }

padding: 10px 20px; }

</style>

[Brian Radspinner]

try...

<style>
table.lyrics,
table.lyrics tr,
table.lyrics tr td { border: none; padding: 10px 20px; }

table.lyrics tr td.trans { border-left: 1px solid #000; }
</style>

The TD element (table data) is what holds the text, so adjust the padding on those elements. If just want the translation spacing to change:

<style>
table.lyrics,
table.lyrics tr,
table.lyrics tr td { border: none; }

table.lyrics tr td.trans { border-left: 1px solid #000; padding: 10px 20px; }
</style>

[Xabriña]

Thank you very much Brian !!!

You have made my day.

Greetings.