Leader dots separating columns in an HTML table
I want to create a table of contents in three columns with dots connecting them:
song.title......... author........... page
I tried to follow the example given by catchmyfame in
Create leading dots in CSS
but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.
Here's the URL of the page on my website:
http://conchord.org/xeno/ix.fsm.html
Here's my CSS:
<style type="text/css">
<!--
#maintable div {
background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
padding-right: 0;
}
#maintable td+td+td div {
text-align: right;
background-color: #fff;
}
#maintable .nodots div,
background: solid #fff;
text-align: right;
}
#maintable div span {
background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>
And the start of my section:
<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>
<table id="maintable">
<tr>
<td>
<div><span>Ballad of Rhysling, The</span></div>
</td>
<td>
<div><span>Roger Scime</span></div>
</td>
<td>
<div><span class="nodots">92 </span></div>
</td>
</tr>
Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.
css-tables leader
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
add a comment |
I want to create a table of contents in three columns with dots connecting them:
song.title......... author........... page
I tried to follow the example given by catchmyfame in
Create leading dots in CSS
but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.
Here's the URL of the page on my website:
http://conchord.org/xeno/ix.fsm.html
Here's my CSS:
<style type="text/css">
<!--
#maintable div {
background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
padding-right: 0;
}
#maintable td+td+td div {
text-align: right;
background-color: #fff;
}
#maintable .nodots div,
background: solid #fff;
text-align: right;
}
#maintable div span {
background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>
And the start of my section:
<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>
<table id="maintable">
<tr>
<td>
<div><span>Ballad of Rhysling, The</span></div>
</td>
<td>
<div><span>Roger Scime</span></div>
</td>
<td>
<div><span class="nodots">92 </span></div>
</td>
</tr>
Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.
css-tables leader
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36
add a comment |
I want to create a table of contents in three columns with dots connecting them:
song.title......... author........... page
I tried to follow the example given by catchmyfame in
Create leading dots in CSS
but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.
Here's the URL of the page on my website:
http://conchord.org/xeno/ix.fsm.html
Here's my CSS:
<style type="text/css">
<!--
#maintable div {
background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
padding-right: 0;
}
#maintable td+td+td div {
text-align: right;
background-color: #fff;
}
#maintable .nodots div,
background: solid #fff;
text-align: right;
}
#maintable div span {
background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>
And the start of my section:
<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>
<table id="maintable">
<tr>
<td>
<div><span>Ballad of Rhysling, The</span></div>
</td>
<td>
<div><span>Roger Scime</span></div>
</td>
<td>
<div><span class="nodots">92 </span></div>
</td>
</tr>
Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.
css-tables leader
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
I want to create a table of contents in three columns with dots connecting them:
song.title......... author........... page
I tried to follow the example given by catchmyfame in
Create leading dots in CSS
but it's not working the way I expect. In fact, it's differently wrong when I display it as a local disk file than when I get it from my website.
Here's the URL of the page on my website:
http://conchord.org/xeno/ix.fsm.html
Here's my CSS:
<style type="text/css">
<!--
#maintable div {
background: url('dot.gif') repeat-x bottom;
}
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
#maintable td+td div,
#maintable td+td+td div {
padding-right: 0;
}
#maintable td+td+td div {
text-align: right;
background-color: #fff;
}
#maintable .nodots div,
background: solid #fff;
text-align: right;
}
#maintable div span {
background-color: #fff;
}
#maintable td div span,
#maintable td div span.nodots {
background-color: white;
}
table#maintable tr td+td+td { background-color: white; }
-->
</style>
And the start of my section:
<body>
<h2>
Index of songs in <i>The Filksong Manual</i>
</h2>
<table id="maintable">
<tr>
<td>
<div><span>Ballad of Rhysling, The</span></div>
</td>
<td>
<div><span>Roger Scime</span></div>
</td>
<td>
<div><span class="nodots">92 </span></div>
</td>
</tr>
Note: I don't want the leader dots to quite reach the next column: I want them to stop about 2em before the start of the next column, hence the 2em padding in my CSS.
css-tables leader
css-tables leader
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
edited Jan 21 at 6:49
A. P. Damien
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
asked Jan 17 at 17:46
A. P. DamienA. P. Damien
19117
19117
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36
add a comment |
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36
add a comment |
1 Answer
1
active
oldest
votes
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
Thetd+td DIVandtd DIVstill havemargin-leftandmargin-rightrespectively which render the "empty" space you see.
– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54241526%2fleader-dots-separating-columns-in-an-html-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
Thetd+td DIVandtd DIVstill havemargin-leftandmargin-rightrespectively which render the "empty" space you see.
– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
add a comment |
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
Thetd+td DIVandtd DIVstill havemargin-leftandmargin-rightrespectively which render the "empty" space you see.
– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
add a comment |
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
Try the following in your CSS:
TABLE TD DIV SPAN { background-color: white; }
That should eliminate the overlap.
Then I would remove the
#maintable td div
{
margin-right: 1ex;
}
#maintable td+td div {
margin-left: 1ex;
}
To remove the gaps. From there, it will likely be a series of minor tweaks to get the exact spacing (perhaps add some padding to the SPAN to avoid the dots from "touching".
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
answered Jan 20 at 2:21
Forty3Forty3
1,9321816
1,9321816
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
Thetd+td DIVandtd DIVstill havemargin-leftandmargin-rightrespectively which render the "empty" space you see.
– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
add a comment |
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
Thetd+td DIVandtd DIVstill havemargin-leftandmargin-rightrespectively which render the "empty" space you see.
– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
That improved things, but I'm still getting leader in front of the right-aligned numbers.
– A. P. Damien
Jan 21 at 6:49
1
1
The
td+td DIV and td DIV still have margin-left and margin-right respectively which render the "empty" space you see.– Forty3
Jan 21 at 22:04
The
td+td DIV and td DIV still have margin-left and margin-right respectively which render the "empty" space you see.– Forty3
Jan 21 at 22:04
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
I'm marking this question as answered. I'll start a new question with the remaining tweak I want to make.
– A. P. Damien
Jan 25 at 0:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54241526%2fleader-dots-separating-columns-in-an-html-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I am getting a 404 when fetching dot.gif.
– Forty3
Jan 17 at 17:52
Thank you. That explains why it was differently wrong on the website than on my local disk. I have uploaded dot.gif. Now the question is why there are leader dots in the third column.
– A. P. Damien
Jan 18 at 21:32
I also made some small changes in my CSS in the original question.
– A. P. Damien
Jan 18 at 21:36