HTML tables hide cells

I know everyone is going to tell me not to use tables and I get it, but it works in this simple application except I am trying to hide a few cells. Can't seem to figure out how to prevent them from displaying. Any help would be greatly appreciated!

enter image description here

<div id="memtab">

    <table>

        <tr class="head">

            <td>Head 1</td>

            <td>Head 2</td>

            <td>Head 3</td>

            <td>Head 4</td>

            <td>Head 5</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Hide</td>

            <td>Hide</td>

            <td>Hide</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

    </table>

</div>

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

add a comment |

enter image description here

<div id="memtab">

    <table>

        <tr class="head">

            <td>Head 1</td>

            <td>Head 2</td>

            <td>Head 3</td>

            <td>Head 4</td>

            <td>Head 5</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Hide</td>

            <td>Hide</td>

            <td>Hide</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

    </table>

</div>

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

add a comment |

enter image description here

<div id="memtab">

    <table>

        <tr class="head">

            <td>Head 1</td>

            <td>Head 2</td>

            <td>Head 3</td>

            <td>Head 4</td>

            <td>Head 5</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Hide</td>

            <td>Hide</td>

            <td>Hide</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

    </table>

</div>

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

enter image description here

<div id="memtab">

    <table>

        <tr class="head">

            <td>Head 1</td>

            <td>Head 2</td>

            <td>Head 3</td>

            <td>Head 4</td>

            <td>Head 5</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

        <tr>

            <td>Hide</td>

            <td>Hide</td>

            <td>Hide</td>

            <td>Display</td>

            <td>Display</td>

        </tr>

    </table>

</div>

html css css3 html-table

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

edited Nov 28 '18 at 7:53

Brian Tompsett - 汤莱恩

4,2421338102

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

asked Nov 28 '18 at 3:33

Atomiklan

1,24142441

add a comment |

2 Answers
2

active

oldest

votes

Tables should be used in certain scenarios - such as when you want to display tabular data - but they are often misused for page layout.

You can hide cells using visibility: hidden.

A side note, learn about html table elements such as thead, tbody and th. They will help structure your table with greater semantic meaning.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

1

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

add a comment |

Use visibility: hidden; to your <td>'s style

Instead of just make 3 or more style in one cell, why would we use colspan to make our cell easier to config?

<tr>

    <td colspan=2 style="visibility:collapse">Hide</td>

    <td>Display</td>

    <td>Display</td>

</tr>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53511707%2fhtml-tables-hide-td-cells%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Tables should be used in certain scenarios - such as when you want to display tabular data - but they are often misused for page layout.

You can hide cells using visibility: hidden.

A side note, learn about html table elements such as thead, tbody and th. They will help structure your table with greater semantic meaning.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

1

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

add a comment |

Tables should be used in certain scenarios - such as when you want to display tabular data - but they are often misused for page layout.

You can hide cells using visibility: hidden.

A side note, learn about html table elements such as thead, tbody and th. They will help structure your table with greater semantic meaning.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

1

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

add a comment |

Tables should be used in certain scenarios - such as when you want to display tabular data - but they are often misused for page layout.

You can hide cells using visibility: hidden.

A side note, learn about html table elements such as thead, tbody and th. They will help structure your table with greater semantic meaning.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

Tables should be used in certain scenarios - such as when you want to display tabular data - but they are often misused for page layout.

You can hide cells using visibility: hidden.

A side note, learn about html table elements such as thead, tbody and th. They will help structure your table with greater semantic meaning.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

table {

  border-collapse: collapse;

}



thead {

  background: yellow;

}



th,

td {

  border: 1px solid black;

}



.hide {

  visibility: hidden;

  border: none;

}

<div id="memtab">

    <table>

        <thead>

          <tr>

              <th>Head 1</th>

              <th>Head 2</th>

              <th>Head 3</th>

              <th>Head 4</th>

              <th>Head 5</th>

          </tr>

        </thead>

        <tbody>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

            <tr>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td class="hide">Hide</td>

                <td>Display</td>

                <td>Display</td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:49

itodd

2,030188

answered Nov 28 '18 at 3:49

itodd

2,030188

answered Nov 28 '18 at 3:49

itodd

2,030188

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

1

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

add a comment |

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

1

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

Hmm, doesn't see to be working. The cells are empty, but the boxes are still visible.

– Atomiklan
Nov 28 '18 at 4:04

I've updated the answer to use border: none; on the hidden tds

– itodd
Nov 28 '18 at 4:12

Ok seems to be working in your example. Not working in my code yet, but this must because of something thing else going on. Will check my work. Thank you!

– Atomiklan
Nov 28 '18 at 5:07

add a comment |

Use visibility: hidden; to your <td>'s style

Instead of just make 3 or more style in one cell, why would we use colspan to make our cell easier to config?

<tr>

    <td colspan=2 style="visibility:collapse">Hide</td>

    <td>Display</td>

    <td>Display</td>

</tr>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

add a comment |

Use visibility: hidden; to your <td>'s style

Instead of just make 3 or more style in one cell, why would we use colspan to make our cell easier to config?

<tr>

    <td colspan=2 style="visibility:collapse">Hide</td>

    <td>Display</td>

    <td>Display</td>

</tr>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

add a comment |

Use visibility: hidden; to your <td>'s style

Instead of just make 3 or more style in one cell, why would we use colspan to make our cell easier to config?

<tr>

    <td colspan=2 style="visibility:collapse">Hide</td>

    <td>Display</td>

    <td>Display</td>

</tr>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

Use visibility: hidden; to your <td>'s style

Instead of just make 3 or more style in one cell, why would we use colspan to make our cell easier to config?

<tr>

    <td colspan=2 style="visibility:collapse">Hide</td>

    <td>Display</td>

    <td>Display</td>

</tr>

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

edited Nov 28 '18 at 4:11

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

answered Nov 28 '18 at 3:59

Miruku Sheki

278116

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

add a comment |

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

This is closer, the the main box still surrounds the table.

– Atomiklan
Nov 28 '18 at 4:05

I already edited the code. Try it!

– Miruku Sheki
Nov 28 '18 at 4:11

Hmm still broken

– Atomiklan
Nov 28 '18 at 5:06

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl