Table caption appears inside outline in some browsers, outside in others
I am putting a border and outline around a table. It works fine in latest IE and Firefox, but Chrome is putting the outline around my captions as well. In IE and Firefox the outline only displays around the table, which is what I want. How to fix this in Chrome?
Demo: http://jsfiddle.net/R7aTq/17/
HTML
<table align="center" cellspacing="1" class="homepagemodule report" id="trades">
<caption><span>Pending Trades</span></caption>
<tbody>
<tr>
<th>Currently Outstanding Trades</th>
</tr>
<tr class="oddtablerow">
<td>
<ul>
<li>0 trades proposed by me to others</li>
<li>0 trades proposed by others to me</li>
<li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&O=05">View trades now</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS
Table caption appears inside outline in some browsers, outside in others.
caption {
color: #333;
font-weight: 400;
font-size: 12pt;
background: none;
text-align: center;
}
.report {
width: 300px;
background: #ccc;
border: 2px solid #fff;
outline: 1px solid #000;
}
html css html-table
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
add a comment |
I am putting a border and outline around a table. It works fine in latest IE and Firefox, but Chrome is putting the outline around my captions as well. In IE and Firefox the outline only displays around the table, which is what I want. How to fix this in Chrome?
Demo: http://jsfiddle.net/R7aTq/17/
HTML
<table align="center" cellspacing="1" class="homepagemodule report" id="trades">
<caption><span>Pending Trades</span></caption>
<tbody>
<tr>
<th>Currently Outstanding Trades</th>
</tr>
<tr class="oddtablerow">
<td>
<ul>
<li>0 trades proposed by me to others</li>
<li>0 trades proposed by others to me</li>
<li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&O=05">View trades now</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS
Table caption appears inside outline in some browsers, outside in others.
caption {
color: #333;
font-weight: 400;
font-size: 12pt;
background: none;
text-align: center;
}
.report {
width: 300px;
background: #ccc;
border: 2px solid #fff;
outline: 1px solid #000;
}
html css html-table
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
1
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22
add a comment |
I am putting a border and outline around a table. It works fine in latest IE and Firefox, but Chrome is putting the outline around my captions as well. In IE and Firefox the outline only displays around the table, which is what I want. How to fix this in Chrome?
Demo: http://jsfiddle.net/R7aTq/17/
HTML
<table align="center" cellspacing="1" class="homepagemodule report" id="trades">
<caption><span>Pending Trades</span></caption>
<tbody>
<tr>
<th>Currently Outstanding Trades</th>
</tr>
<tr class="oddtablerow">
<td>
<ul>
<li>0 trades proposed by me to others</li>
<li>0 trades proposed by others to me</li>
<li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&O=05">View trades now</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS
Table caption appears inside outline in some browsers, outside in others.
caption {
color: #333;
font-weight: 400;
font-size: 12pt;
background: none;
text-align: center;
}
.report {
width: 300px;
background: #ccc;
border: 2px solid #fff;
outline: 1px solid #000;
}
html css html-table
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
I am putting a border and outline around a table. It works fine in latest IE and Firefox, but Chrome is putting the outline around my captions as well. In IE and Firefox the outline only displays around the table, which is what I want. How to fix this in Chrome?
Demo: http://jsfiddle.net/R7aTq/17/
HTML
<table align="center" cellspacing="1" class="homepagemodule report" id="trades">
<caption><span>Pending Trades</span></caption>
<tbody>
<tr>
<th>Currently Outstanding Trades</th>
</tr>
<tr class="oddtablerow">
<td>
<ul>
<li>0 trades proposed by me to others</li>
<li>0 trades proposed by others to me</li>
<li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&O=05">View trades now</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS
Table caption appears inside outline in some browsers, outside in others.
caption {
color: #333;
font-weight: 400;
font-size: 12pt;
background: none;
text-align: center;
}
.report {
width: 300px;
background: #ccc;
border: 2px solid #fff;
outline: 1px solid #000;
}
html css html-table
html css html-table
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
edited Nov 25 '18 at 20:30
Brian Tompsett - 汤莱恩
4,2321338102
4,2321338102
asked Mar 26 '13 at 13:54
MShackMShack
2391520
asked Mar 26 '13 at 13:54
MShackMShack
2391520
asked Mar 26 '13 at 13:54
MShackMShack
2391520
2391520
1
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22
add a comment |
1
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22
1
1
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22
add a comment |
1 Answer
1
active
oldest
votes
You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.
Remove outline from your report class and add a new class or new style to tbody that sets the outline.
EDIT
Add in display:block; that seems to fix it.
updated the proof: http://jsfiddle.net/R7aTq/83/
Or you could get rid of tables all together and use divs like in this fiddle:
non-table version: http://jsfiddle.net/R7aTq/130/
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
|
show 6 more comments
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%2f15638824%2ftable-caption-appears-inside-outline-in-some-browsers-outside-in-others%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
You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.
Remove outline from your report class and add a new class or new style to tbody that sets the outline.
EDIT
Add in display:block; that seems to fix it.
updated the proof: http://jsfiddle.net/R7aTq/83/
Or you could get rid of tables all together and use divs like in this fiddle:
non-table version: http://jsfiddle.net/R7aTq/130/
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
|
show 6 more comments
You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.
Remove outline from your report class and add a new class or new style to tbody that sets the outline.
EDIT
Add in display:block; that seems to fix it.
updated the proof: http://jsfiddle.net/R7aTq/83/
Or you could get rid of tables all together and use divs like in this fiddle:
non-table version: http://jsfiddle.net/R7aTq/130/
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
|
show 6 more comments
You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.
Remove outline from your report class and add a new class or new style to tbody that sets the outline.
EDIT
Add in display:block; that seems to fix it.
updated the proof: http://jsfiddle.net/R7aTq/83/
Or you could get rid of tables all together and use divs like in this fiddle:
non-table version: http://jsfiddle.net/R7aTq/130/
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.
Remove outline from your report class and add a new class or new style to tbody that sets the outline.
EDIT
Add in display:block; that seems to fix it.
updated the proof: http://jsfiddle.net/R7aTq/83/
Or you could get rid of tables all together and use divs like in this fiddle:
non-table version: http://jsfiddle.net/R7aTq/130/
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
edited Mar 26 '13 at 15:53
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
answered Mar 26 '13 at 13:58
Jake ZeitzJake Zeitz
1,73911528
1,73911528
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
|
show 6 more comments
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
The styling isn't the same. There's no longer a 2px gap between the outline and the background color (the white border inside the outline).
– Matt Coughlin
Mar 26 '13 at 14:39
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
thx , i tried the tbody before posting and didn't work in Chrome
– MShack
Mar 26 '13 at 14:44
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
Jake retried again, it works in Chrome now, but leaves a larger outline in FF and IE jsfiddle.net/R7aTq/80
– MShack
Mar 26 '13 at 14:54
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
see my edit if that works
– Jake Zeitz
Mar 26 '13 at 15:06
1
1
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
@JakeZeitz: It's worth mentioning that this isn't the type of content that's really appropriate for an HTML table anyways. Tables are best used for data grids. Arguably, little or nothing is gained by using a table here.
– Matt Coughlin
Mar 26 '13 at 16:19
|
show 6 more comments
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%2f15638824%2ftable-caption-appears-inside-outline-in-some-browsers-outside-in-others%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
1
Do you have an image of what it looks like for you? seems fine to me
– chriz
Mar 26 '13 at 14:03
This affects Chrome, Safari, and Opera.
– Matt Coughlin
Mar 26 '13 at 14:13
The decision of whether a table caption should appear inside or outside of a table outline appears to have been left up to individual browsers to choose. It appears to be very consistent for each browser though, and reasonable either way. Personally, I find it more appropriate to have the caption inside the outline, as is the case with Chrome, since the caption is a part of the table.
– Matt Coughlin
Mar 26 '13 at 16:22