CODEWITHSUNDEEP
htmlcss
penguru
penguru

Reputation: 4370

Removing table line

I want to add two table or more consecutively and they must be seemed like one table. 

<html>
<head>
<style type="text/css">
.cls
{
border:1px solid #000000;
}
.cls td {
    border:1px solid #000000;
}

</style>
</head>

<body>
<table class="cls">
    <tr>
        <td>aaa</td><td>bbb</td><td>ccc</td>
    </tr>
    <tr>
        <td>ddd</td><td>eee</td><td>fff</td>
    </tr>
</table>

<table class="cls">
    <tr>
        <td>aaa</td><td>bbb</td><td>ccc</td>
    </tr>
    <tr>
        <td>ddd</td><td>eee</td><td>fff</td>
    </tr>
</table>

    </body>
</html>

My problem is the line that tables combined has a doble line normally. How can i show it like a single line.

alt text

Upvotes: 1

Views: 463

Answers (2)

Gazler
Gazler

Reputation: 84140

.cls-last
{
   border-top: 0px;
}

On your 2nd table:

<table class="cls cls-last">
    <tr>
        <td>aaa</td><td>bbb</td><td>ccc</td>
    </tr>
    <tr>
        <td>ddd</td><td>eee</td><td>fff</td>
    </tr>
</table>

Upvotes: 3

bpeterson76
bpeterson76

Reputation: 12870

You could change the top (or bottom) border of the table via CSS.

However, alignment could be a challenge here. In the example you gave, not a problem--each contains 3 (relatively) similar characters each. So, it'd be nearly identical. However if one column in one table has 10 characters for instance, HTML is going to stretch that column and you're going to be left with two obviously different entities.

So, to make this work 100% of the time, you're going to need to set widths and (possibly) overflow properties as well.

I'm having a tough time understanding why you'd have to do it this way. I'm sure you've got a reason, but two similar entities with similar widths and columns should be able to be commingled. If the tables were to only sometimes appear, or you wanted to remove rows, you could do so via Javascript and/or CSS or at the server level when rendering.

Upvotes: 0

Related Questions