CODEWITHSUNDEEP
htmlcssborder
nowox
nowox

Reputation: 29116

border in cascaded html tables

I have to display some data. I think it is better in my case to use tables instead of div because it allows to properly see the data even without css.

My solution that involves cascaded tables shows an ugly border offset that you can see here: http://jsfiddle.net/u2rtfaa0/.

I tried to use this directive but it doesn't solve my problem. 

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0; 
    padding: 0; 
    margin: 0;
}

I guess I did something wrong.

Upvotes: 0

Views: 71

Answers (3)

Gemtastic
Gemtastic

Reputation: 6433

You are reapplying a border on every "block", if you notice that sub-subtitle is 3px wide at the sides and bottom because it's enclosed by the title border, the subtitle border and its own border. This happen because you put subtitle in a new table, and sub-subtitle in a new table WITHIN the table within the table.

remove the extra tables. like so: http://jsfiddle.net/u2rtfaa0/2/

<table>
<tr>
    <th>Title</th>
    <th class=num>min</th>
    <th class=num>nom</th>
    <th class=num>max</th>
</tr>
<tr>
    <td>foo</td>
    <td class=num>123</td>
    <td class=num>222</td>
    <td class=num>432</td>
</tr>
<tr>
</table>
<table>
            <tr>
                <th>Subtitle</th>
                <th class=num>888</th>
                <th class=num>777</th>
                <th class=num>666</th>
            </tr>
            <tr>
                <td>foo</td>
                <td class=num>123</td>
                <td class=num>222</td>
                <td class=num>432</td>
            </tr>
</table>
<table>
                    <tr>
                        <th>SubSubtitle</th>
                        <th class=num>888</th>
                        <th class=num>777</th>
                        <th class=num>666</th>
                    </tr>
                    <tr>
                        <td>foo</td>
                        <td class=num>123</td>
                        <td class=num>222</td>
                        <td class=num>432</td>
    </tr>
</tr>
</table>

Upvotes: 1

Akshay
Akshay

Reputation: 14358

You have to close each table as shown and add margin:-1px http://jsfiddle.net/u2rtfaa0/11/

<table>
<tr>
<th>Title</th>
<th class=num>min</th>
<th class=num>nom</th>
<th class=num>max</th>
</tr>
<tr>
<td>foo</td>
<td class=num>123</td>
<td class=num>222</td>
<td class=num>432</td>

</tr>
</table>
<tr>
<td colspan=4>

<table>
<tr>
<th>Subtitle</th>
<th class=num>888</th>
<th class=num>777</th>
<th class=num>666</th>
</tr>
<tr>
<td>foo</td>
<td class=num>123</td>
<td class=num>222</td>
<td class=num>432</td>
</tr>
</table>

<td colspan=4>
 <table>
 <tr>
 <th>SubSubtitle</th>
 <th class=num>888</th>
 <th class=num>777</th>
 <th class=num>666</th>
 </tr>
 <tr>
 <td>foo</td>
 <td class=num>123</td>
 <td class=num>222</td>
 <td class=num>432</td>
 </tr>
 </table> 
 </td>                        

 </td>
</tr>

CSS

table { 
width: 100%; 
}

table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0; 
padding: 0; 
margin: -1px;
}

.num {
width: 50px;
}

Upvotes: 0

Faruk Yazici
Faruk Yazici

Reputation: 2404

Here I come up with a solution, with live demo here http://jsfiddle.net/u2rtfaa0/9/

Basically I added margin:-1px to all table and elements, you css is now like this:

table { 
width: 100%;
}

table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0; 
padding: 0;
margin:-1px;
}

.num {
width: 50px;
}

But I had to change width from 100% to a certain value because extra white space ocurred on the right. However, if you want to make it still 100%, try adding -1 margins to various elements.

Upvotes: 0

Related Questions