CODEWITHSUNDEEP
htmlcsshtml-table
Spedwards
Spedwards

Reputation: 4492

Remove td's outside borders

I currently have this table:

Table

with this following markup:

<table border="1" cellpadding="3">
    <thead>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </tbody>
</table>

I'm currently having trouble removing the outside border of the bottom left td element. There is a border beneath where I have drawn the red lines but I do not want them there.

Is there an easy way to go about removing this?

EDIT:

Expected result:

Expected Table

Upvotes: 1

Views: 1034

Answers (5)

Sunny
Sunny

Reputation: 194

Its a bit tricky to achieve what you expect, I have a kind of work around

But if you want the exact output you might need to get rid of table and use div, span etc with some css

Please check this fiddle to see if it helps fiddle demo

<table>
<thead>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</thead>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="3" style="border: 0;"></td>
        <td colspan="2"></td>
        <td></td>
    </tr>
</tbody>


td {
    padding: 10px 20px;
    border: 2px solid gray;
}

Upvotes: 2

Ravi Patel
Ravi Patel

Reputation: 5211

<table border="1" cellpadding="3">
    <thead>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </tbody>
</table>




td {
    padding: 10px 20px;
    border: 1px solid #000;
}
td[colspan="3"] { 
    border:none;
    position:relative;
}
td[colspan="3"]:after {
     content:"";
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    display: block;
    height: 24px;
    width: 132px;
    position: absolute;
    top: 0;
    left: -3px;
    background: #FFF;
}

Demo success

enter image description here

Upvotes: 0

bondbaby11
bondbaby11

Reputation: 305

You can give that specific td an ID in the tag and then use CSS to remove the border:

border-left: none;
border-bottom: none;

Upvotes: 0

misterManSam
misterManSam

Reputation: 24712

So, if you are still interested. Here is an idea using :after.

Have a fiddle!

CSS

table {
    border: solid 1px #000;
}
td {
    border: solid 1px #000;
    padding: 20px;
    width: 100px;
}
.borderless {
    border: none;
    position: relative;
}
.borderless:after {
    content:"";
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    display: block;
    height: 62px;
    width: 287px;
    position: absolute;
    top: 0;
    left: -3px;
    background: #FFF;
}

HTML

<table>
    <thead>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" class="borderless">Content</td>
            <td colspan="2">Content</td>
            <td>Content</td>
        </tr>
    </tfoot>
</table>

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Your requirement is little tricky. You can't achieve this straightway. But you can achieve this using some additional code. The idea is to create one div on that particular table column assign left and right border as a white color text. Assign margin to minus value so that it will hide the original table border.

HTML:

 <table cellpadding="3" border="1">
<thead>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</thead>
<tbody>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
        <td>44</td>
        <td>55</td>
        <td>66</td>
    </tr>
    <tr>
        <td colspan="3" style="border:0px; border-top:1px solid #000; border-right:1px solid #000;"><div style="margin-left:-6px; border:1px solid #fff; margin-bottom:-6px; height:100%;">
            <div style="padding:5px">te</div>

        </div></td>
        <td colspan="2">as</td>
        <td>bs</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO

Upvotes: 0

Related Questions