Simulate tab in CSS

Question

Is there anyway to simulate Tab positions with CSS.

Like:

..........|.........|..........|.........
Text!     Next tab  |          |
Longer text!        Next tab   |
Even more longer text!         Next tab

How can I simulate this behavior?

PS: If it not obvious, I don't know the text length in advance.

I dont really understand your question. Could you explain a little more? — Anirudh Ramanathan, Jun 10 '11 at 20:19

NGLN · Answer 1 · 2011-06-11T00:32:08.460

A pure CSS solution seems unlikely to me for this behaviour. So if you turn into using javascript, it might look like this:

HTML:

<div id="tabs">
    <p><span>Text!</span><span>Next tab</span></p>
    <p><span>Longer text!</span><span>Next tab</span></p>
    <p><span>Even more longer text !</span><span>Next tab</span></p>
</div>

Javascript:

var tabs = document.getElementById('tabs');
var ps = tabs.getElementsByTagName('p');
var p;
var spans;
var span;
var w;
var wTab = 70;

for (var i = 0; i < ps.length; i++)
{   p = ps.item(i);
    spans = p.getElementsByTagName('span');
    for (var j = 0; j < spans.length - 1; j++)
    {   span = spans.item(j);
        w = span.offsetWidth;
        w = Math.ceil(w / wTab) * wTab - w;
        span.style.paddingRight = w + 'px';
    }
}

See also Demo fiddle.

Disclaimer: I'm a noob at javascript, and surely don't know anything about javascript frameworks, so it's highly probable this routine can be optimized.

This works as I need, but I still need a non-javascript solution. It doesn't need to be perfect. If I found a way to make a inline block width grow in steps (or something similar) it would solve the problem right way. I will wait a few days before marking this as Accepted Anwser. — Luiz Borges, Jun 12 '11 at 12:05

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

If it doesn't have to be perfect (as the OP said Jun 12 '11 at 12:05), at least in ie7, a <pre> block already supports tabbing with tab-chars (fixed at 8 char-widths [ref] unless tab-size is supported [ref]), and, maybe useful here too, a style-attribute to override the default monospace font.

edited May 23 '17 at 11:56

Community

1
1

answered Nov 11 '12 at 14:31

e.c

61
1
1

NGLN · Answer 3 · 2011-06-10T20:43:40.383

0

You should use table for showing tabular data: see this demonstration fiddle.

edited Jun 10 '11 at 20:43

answered Jun 10 '11 at 20:29

NGLN

43,011
8
105
200

i don't think "tabs" are "tabular" data, as similar as they sound. "tabular data" is information that needs to be laid out as in a spreadsheet. Tabs are just a convenient UI way of displaying navigation. – Thomas Shields Jun 10 '11 at 20:34
@Thomas Shields: Well, I don't understand what you mean by that last sentence, but you are completely right: I didn't got the question. I do now! ;-) – NGLN Jun 11 '11 at 00:21
i just meant that tabs are a nice way of displaying navigation to the user. Glad you figured it out for your other answer. :) – Thomas Shields Jun 11 '11 at 00:48

score 0 · Answer 4 · answered Jul 21 '11 at 00:39

Here is a way that I got around a similar problem, but the success of this method will depend on your specific application.

Rather than thinking about it as a string with tabs, try using an HTML Table with a border of 0. Each column is perfectly aligned so it's like a tab.

<table border="0">
 <tr>
   <td>not tabbed</td>
   <td>1 tab over</td>
   <td> </td>
 </tr>
 <tr>
   <td>not tabbed</td>
   <td> </td>
   <td>2 tabs over</td>
 </tr>
</table>

will give you what you want - or you can modify it to do so

Simulate tab in CSS

4 Answers4