Colspan + Equal cell width after multiple columns are removed
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
html css html-table
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
add a comment |
3
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
html css html-table
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
3
There is no css equivalent tocolspan="8", so you can stop looking. Use Javascript.
– Mr Lister
Feb 3 '12 at 10:26
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13
add a comment |
3
3
3
0
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
html css html-table
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
html css html-table
html css html-table
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
edited Jan 3 at 22:25
Brian Tompsett - 汤莱恩
4,2521339103
4,2521339103
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
asked Feb 3 '12 at 9:43
AlexStackAlexStack
7,632115891
7,632115891
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
3
There is no css equivalent tocolspan="8", so you can stop looking. Use Javascript.
– Mr Lister
Feb 3 '12 at 10:26
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13
add a comment |
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
3
There is no css equivalent tocolspan="8", so you can stop looking. Use Javascript.
– Mr Lister
Feb 3 '12 at 10:26
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
3
3
There is no css equivalent to
colspan="8", so you can stop looking. Use Javascript.– Mr Lister
Feb 3 '12 at 10:26
There is no css equivalent to
colspan="8", so you can stop looking. Use Javascript.– Mr Lister
Feb 3 '12 at 10:26
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13
add a comment |
1 Answer
1
active
oldest
votes
1
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change thecolspanwith JavaScript.
– RoToRa
Feb 3 '12 at 14:08
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing thecolspanwith JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing thecolspanserver-side instead.
– RoToRa
Feb 9 '12 at 9:34
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%2f9126565%2fcolspan-equal-cell-width-after-multiple-columns-are-removed%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
1
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change thecolspanwith JavaScript.
– RoToRa
Feb 3 '12 at 14:08
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing thecolspanwith JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing thecolspanserver-side instead.
– RoToRa
Feb 9 '12 at 9:34
add a comment |
1
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change thecolspanwith JavaScript.
– RoToRa
Feb 3 '12 at 14:08
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing thecolspanwith JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing thecolspanserver-side instead.
– RoToRa
Feb 9 '12 at 9:34
add a comment |
1
1
1
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
edited Apr 3 '14 at 11:23
Barna Tekse
2,42772437
2,42772437
answered Feb 3 '12 at 10:34
VannenVannen
4321617
answered Feb 3 '12 at 10:34
VannenVannen
4321617
answered Feb 3 '12 at 10:34
VannenVannen
4321617
4321617
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change thecolspanwith JavaScript.
– RoToRa
Feb 3 '12 at 14:08
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing thecolspanwith JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing thecolspanserver-side instead.
– RoToRa
Feb 9 '12 at 9:34
add a comment |
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change thecolspanwith JavaScript.
– RoToRa
Feb 3 '12 at 14:08
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing thecolspanwith JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing thecolspanserver-side instead.
– RoToRa
Feb 9 '12 at 9:34
1
1
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change the
colspan with JavaScript.– RoToRa
Feb 3 '12 at 14:08
You are relying on the error correction of the browser here. Having different number of columns in table rows is not defined. Different browsers could do different things or this could break in a different scenario. The only proper way to do this is to change the
colspan with JavaScript.– RoToRa
Feb 3 '12 at 14:08
1
1
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
I don't know what he relied on, but his solution works in FireFox, Opera, Internet Explorer and Chrome.
– AlexStack
Feb 3 '12 at 15:24
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
It doesn't work! You are just lucky it looks like it in your scenario. Imagine a craftsman banging a screw into a piece of wood with a hammer. That may work and hold for a while, but there's a good chance it will break some time. And would you trust a craftsman doing that?
– RoToRa
Feb 5 '12 at 12:29
2
2
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
It is what we call a hack, Rotora. It is not the optimal solution but it does work when you want to avoid Javascript. I have used this hack for quite a while and it has always worked.
– Vannen
Feb 5 '12 at 17:33
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing the
colspan with JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing the colspan server-side instead.– RoToRa
Feb 9 '12 at 9:34
@Brain: I was under the impression that Alex was removing the columns with JS, so also changing the
colspan with JS would be fine, but I misread the original question and you are right, using JS would be wrong here. However that just means he should be calculating and changing the colspan server-side instead.– RoToRa
Feb 9 '12 at 9:34
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.
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%2f9126565%2fcolspan-equal-cell-width-after-multiple-columns-are-removed%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
How are the columns removed? can you not change the colspan value to match the number of columns when you remove them?
– Deadlykipper
Feb 3 '12 at 9:49
They are moved using one line of JQuery at runtime according to some data that is received using Ajax. It is possible to use JQuery to set the "colspan" attribute of all the cells that have it, but I prefer a CSS solution if it is possible.
– AlexStack
Feb 3 '12 at 10:04
3
There is no css equivalent to
colspan="8", so you can stop looking. Use Javascript.– Mr Lister
Feb 3 '12 at 10:26
apparently it's possible! See the correct answer below.
– AlexStack
Feb 3 '12 at 13:13