CODEWITHSUNDEEP
htmlcsshtml-table
Jaanus
Jaanus

Reputation: 16541

Joining multiple HTML table borders

My example code:

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>

</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>
    <table border="1">
        <tr>
            <td>
                test
            </td>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            test
                        </td>
                        <td>    
                            wuut
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test1
                        </td>
                        <td>    
                            wuut1
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test2
                        </td>
                        <td>    
                            wuut2
                        </td>   
                    </tr>
                </table>
            </td>   
        </tr>
    </table>
  </td>
</tr>
</table>

</body>
</html>


<style>
    table {
        border-collapse: collapse;
    }
</style>

You can just paste it here and see what it looks like : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

What I need is that when tables are inside each other, tables have like joined borders. Only tables that data are separated.

At the moment the right bottom corner of table has like 3 layers of border, but that just looks ugly.

I tried using CSS: 

border-collapse: collapse;

But this just removed cellspacing for borders :/

It should look like this, but this is with colspan/rowspan, which is too messy:

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td colspan="3"> </td>
</tr>
<tr>
  <td rowspan="3">400</td>
  <td rowspan="3">500</td>
  <td rowspan="3">test</td>
  <td>test</td>
  <td>wuut</td>
</tr>
<tr>
  <td>test1</td>
  <td>test2</td>
</tr>
<tr>
  <td>wuut1</td>
  <td>wuut2</td>
</tr>
</table>

</body>
</html>

Upvotes: 0

Views: 8986

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201608

Modify the program code that generates the markup so that there are no border=1 attributes and there are class attributes for td elements, controlling borders around each cell. The class attribute would corresponds to CSS settings that set a border on selected sides of a cell, e.g. <td class="left top"> with CSS code: 

.left { border-left-style: solid } 
.top { border-top-style: solid }

The width and color of borders you can set in one rule, like:

td { border-width: 1px; border-color: #333; }

You should still set table { border-collapse: collapse } and probably set padding: 0 on each cell that contains a table.

Upvotes: 3

Csak Zoli
Csak Zoli

Reputation: 428

Try <table style="border:0;"> wont show borders if that's what your looking for and you can also be specific about which side you want to display like for example:

 <table style="border-left:1px solid black;">

You can enter to the style border-(left,right,bottom,top):"pixels" "Type of border" "color".

<td style="border:0px;">
                            test
                        </td>
                        <td style="border:0px;">    
                            wuut
                        </td>   
                    </tr>

it wont show them. Or give them an ID and use <style type="text/css"> 

<style type="text/css">
#aa {border:0px;}
</style>

...

<td ID="aa">

... if you can add ID="aa" to that loop then it should work.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201608

It’s a bit tricky, because the borders of nested tables are drawn separately. But you can tune things with some CSS3 so that they work in the desired way on modern browsers. (If you wish to achieve the effect on ancient browsers, too, you would need to scatter around a lot of class attributes.)

You need to remove the default cell spacing from (at least) cells containing tables. (The spacing between borders of inner and outer table come from the cells spacing.) This requires that each td that contains a table has a suitable class attribute, say class=containsTable, because in CSS you cannot refer to an element by its descendants (contents). Moreover, you need to selectively switch off top borders from the cells of the first row of any nested table, etc.:

.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }

Upvotes: 1

Related Questions