Table row not expanding to full width
28
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>html css html-table
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
add a comment |
28
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>html css html-table
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
add a comment |
28
28
28
3
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>html css html-table
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>.Table-Normal
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
.Table-Normal thead tr
background-color: #E74C3C;
font-weight: bold;
.Table-Normal tr
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
.Table-Normal tr td
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
.Table-Normal tbody tr:nth-child(2)
background-color: #EEE;
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>html css html-table
html css html-table
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
edited Nov 11 at 9:56
Brian Tompsett - 汤莱恩
4,1631337100
4,1631337100
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
asked Feb 12 '14 at 0:06
Moussa Harajli
69451426
69451426
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
49
Remove display: block in .Table-Normal
Fiddle
.Table-Normal
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
answered Feb 12 '14 at 0:13
JunM
4,10242444
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
add a comment |
11
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
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
);
);
draft saved
draft discarded
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%2f21715927%2ftable-row-not-expanding-to-full-width%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
49
Remove display: block in .Table-Normal
Fiddle
.Table-Normal
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
answered Feb 12 '14 at 0:13
JunM
4,10242444
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
add a comment |
49
Remove display: block in .Table-Normal
Fiddle
.Table-Normal
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
answered Feb 12 '14 at 0:13
JunM
4,10242444
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
add a comment |
49
49
49
Remove display: block in .Table-Normal
Fiddle
.Table-Normal
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
answered Feb 12 '14 at 0:13
JunM
4,10242444
Remove display: block in .Table-Normal
Fiddle
.Table-Normal
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
answered Feb 12 '14 at 0:13
JunM
4,10242444
answered Feb 12 '14 at 0:13
JunM
4,10242444
answered Feb 12 '14 at 0:13
JunM
4,10242444
answered Feb 12 '14 at 0:13
JunM
4,10242444
4,10242444
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
add a comment |
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
beat me to it! :)
– ochi
Feb 12 '14 at 0:15
3
3
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
removing display block property causes the table no scrolling x-axis anymore
– r0b3rt0
Feb 12 at 11:15
add a comment |
11
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
add a comment |
11
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
add a comment |
11
11
11
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
answered Apr 13 '16 at 18:28
gsnedders
4,25512137
4,25512137
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f21715927%2ftable-row-not-expanding-to-full-width%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
