How can I double underline a text inside a html table cell?
up vote
3
down vote
favorite
Both underline should be of length corresponding to the text content. I've come across another similar question where the accepted solution was to use
.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}
But this is not what I wanted. I want the length of the double underline to be equal to the length of the text content.
html css html-table
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
|
show 14 more comments
up vote
3
down vote
favorite
Both underline should be of length corresponding to the text content. I've come across another similar question where the accepted solution was to use
.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}
But this is not what I wanted. I want the length of the double underline to be equal to the length of the text content.
html css html-table
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
3
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
1
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
1
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24
|
show 14 more comments
up vote
3
down vote
favorite
up vote
3
down vote
favorite
Both underline should be of length corresponding to the text content. I've come across another similar question where the accepted solution was to use
.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}
But this is not what I wanted. I want the length of the double underline to be equal to the length of the text content.
html css html-table
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
Both underline should be of length corresponding to the text content. I've come across another similar question where the accepted solution was to use
.doubleUnderline {
text-decoration:underline;
border-bottom: 1px solid #000;
}
But this is not what I wanted. I want the length of the double underline to be equal to the length of the text content.
html css html-table
html css html-table
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
edited Nov 10 at 10:33
Brian Tompsett - 汤莱恩
4,1631336100
4,1631336100
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
asked Mar 5 '14 at 10:53
Abinash Koirala
652818
652818
3
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
1
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
1
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24
|
show 14 more comments
3
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
1
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
1
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24
3
3
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
1
1
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
1
1
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24
|
show 14 more comments
3 Answers
3
active
oldest
votes
up vote
5
down vote
accepted
I've whipped two examples.
With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.
span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>answered Mar 5 '14 at 10:57
Albzi
13.6k43255
add a comment |
up vote
2
down vote
Try this:
<td>
<span style="border-bottom:double black;">
Grand Total : ###,###,###.00
</span>
</td>
hope this works out for you :)
ps: if you need to adjust the width use at least 3px. otherwise it will not shown as double underline
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
This should really be the answer. Just note that the height needs to be minimum3px, or it will appear as a single underline.
– Svish
Nov 24 '15 at 21:28
add a comment |
up vote
1
down vote
There is a proposed text-decoration-style rule in CSS3 that has a value "double", but it's not supported in browsers yet.
.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
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',
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%2f22195647%2fhow-can-i-double-underline-a-text-inside-a-html-table-cell%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
accepted
I've whipped two examples.
With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.
span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>answered Mar 5 '14 at 10:57
Albzi
13.6k43255
add a comment |
up vote
5
down vote
accepted
I've whipped two examples.
With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.
span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>answered Mar 5 '14 at 10:57
Albzi
13.6k43255
add a comment |
up vote
5
down vote
accepted
up vote
5
down vote
accepted
I've whipped two examples.
With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.
span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>answered Mar 5 '14 at 10:57
Albzi
13.6k43255
I've whipped two examples.
With block elements (like p) you can use inline-block so it doesn't go the full length of page and just the text.
span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>span{
border-bottom:1px solid #000;
text-decoration:underline;
}
p{
border-bottom:1px solid #000;
text-decoration:underline;
display:inline-block;
}<span>This is a bit of text for you</span>
<br>
<p>This is some text for you too</p>answered Mar 5 '14 at 10:57
Albzi
13.6k43255
edited Mar 9 '15 at 8:43
answered Mar 5 '14 at 10:57
Albzi
13.6k43255
answered Mar 5 '14 at 10:57
Albzi
13.6k43255
answered Mar 5 '14 at 10:57
Albzi
13.6k43255
13.6k43255
add a comment |
add a comment |
up vote
2
down vote
Try this:
<td>
<span style="border-bottom:double black;">
Grand Total : ###,###,###.00
</span>
</td>
hope this works out for you :)
ps: if you need to adjust the width use at least 3px. otherwise it will not shown as double underline
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
This should really be the answer. Just note that the height needs to be minimum3px, or it will appear as a single underline.
– Svish
Nov 24 '15 at 21:28
add a comment |
up vote
2
down vote
Try this:
<td>
<span style="border-bottom:double black;">
Grand Total : ###,###,###.00
</span>
</td>
hope this works out for you :)
ps: if you need to adjust the width use at least 3px. otherwise it will not shown as double underline
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
This should really be the answer. Just note that the height needs to be minimum3px, or it will appear as a single underline.
– Svish
Nov 24 '15 at 21:28
add a comment |
up vote
2
down vote
up vote
2
down vote
Try this:
<td>
<span style="border-bottom:double black;">
Grand Total : ###,###,###.00
</span>
</td>
hope this works out for you :)
ps: if you need to adjust the width use at least 3px. otherwise it will not shown as double underline
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
Try this:
<td>
<span style="border-bottom:double black;">
Grand Total : ###,###,###.00
</span>
</td>
hope this works out for you :)
ps: if you need to adjust the width use at least 3px. otherwise it will not shown as double underline
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
answered Jun 18 '14 at 8:20
Jimmy Jangkrik
211
211
This should really be the answer. Just note that the height needs to be minimum3px, or it will appear as a single underline.
– Svish
Nov 24 '15 at 21:28
add a comment |
This should really be the answer. Just note that the height needs to be minimum3px, or it will appear as a single underline.
– Svish
Nov 24 '15 at 21:28
This should really be the answer. Just note that the height needs to be minimum
3px, or it will appear as a single underline.– Svish
Nov 24 '15 at 21:28
This should really be the answer. Just note that the height needs to be minimum
3px, or it will appear as a single underline.– Svish
Nov 24 '15 at 21:28
add a comment |
up vote
1
down vote
There is a proposed text-decoration-style rule in CSS3 that has a value "double", but it's not supported in browsers yet.
.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
add a comment |
up vote
1
down vote
There is a proposed text-decoration-style rule in CSS3 that has a value "double", but it's not supported in browsers yet.
.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
add a comment |
up vote
1
down vote
up vote
1
down vote
There is a proposed text-decoration-style rule in CSS3 that has a value "double", but it's not supported in browsers yet.
.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
There is a proposed text-decoration-style rule in CSS3 that has a value "double", but it's not supported in browsers yet.
.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>.example {
text-decoration-line: underline;
text-decoration-style: double;
}<p class="example">This is how it looks</p>answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
answered Jul 7 '16 at 10:42
Alf Eaton
2,83732833
2,83732833
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f22195647%2fhow-can-i-double-underline-a-text-inside-a-html-table-cell%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
3
What do you mean? It works fine DEMO HERE
– Ruddy
Mar 5 '14 at 10:55
@Ruddy. not with any padding it doesn't. jsfiddle.net/Paulie_D/Vt82L/1
– Paulie_D
Mar 5 '14 at 10:56
@Paulie_D Who said anything about padding?
– Ruddy
Mar 5 '14 at 10:57
1
@abhayK DEMO put a span around the text you want to have it
– Ruddy
Mar 5 '14 at 11:09
1
@BeatAlex Np, its mainly because my name is Alex... and you did beat me to write an answer :P So BeatAlex indeed!
– Ruddy
Mar 5 '14 at 11:24