css - HTML table width discrepancy -


the last row of this chart have created using collapsed html tables shorter few pixels despite having same width. why ? there better way create chart without using multiple tables ?

<table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> <td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user</td> <td style="text-align:center;width:600px;height:25px;border-right:solid 1px;">300 gb</td> <td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">usage (gb)</td> </tr> </table> <table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> <td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user1</td> <td style="background-color:#ff0000;width:436px;height:25px;"></td> <td style="background-color:#d22a00;width:54px;height:25px;"></td> <td style="background-color:#a85400;width:1px;height:25px;"></td> <td style="background-color:#7f7f00;width:12px;height:25px;"></td> <td style="width:97px;border-right:solid 1px;"></td> <td style="width:100px;text-align:center;">252.69</td> </tr> </table> <table cellpadding="0" style="padding-right:0px;padding-left:0px;width:800px;border-top:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> <td style="text-align:center;width:100px;height:25px;border-right:solid 1px;">user2</td> <td style="background-color:#ff0000;width:344px;height:25px;"></td> <td style="width:256px;border-right:solid 1px;"></td> <td style="width:100px;text-align:center;">172.15</td> </tr> </table>  <table cellpadding="0" style="padding-right:0px;padding-left:0px;text-align:center;width:800px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;border-left:solid 1px;border-collapse:collapse;table-layout:fixed"><tr> <td style="height:25px;width:114px;background-color:#ff0000">&gt;32 days</td> <td style="height:25px;width:114px;background-color:#d22a00">&lt;32 days</td> <td style="height:25px;width:114px;background-color:#a85400">&lt;16 days</td> <td style="height:25px;width:114px;background-color:#7f7f00">&lt;8 days</td> <td style="height:25px;width:114px;background-color:#54a800">&lt;4 days</td> <td style="height:25px;width:114px;background-color:#2ad200">&lt;2 days</td> <td style="height:25px;width:116px;background-color:#00ff00">&lt;1 days</td> </tr> </table> 

looks you're doing math wrong or borders screwing numbers. aren't using tables or css classes here. point of using table , not bunch of divs don't have specify each individual cell size should be. display:table property inherits fancy stuff you.

make 1 single new table 3 tds in first 2 rows, , 7 in 3rd row. third row have 7 tds. first , second rows, you'll have td, you'll have td colspan='5' followed td.

here's basic example of colspans:

<table>     <tr>         <td></td>         <td></td>         <td></td>     </tr>     <tr>         <td></td>         <td colspan="2"></td>     </tr> </table> 

then, can give these cells or tows class can use color them css, rather giving each 1 own style attribute.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -