CSS - create table with fixed size and custom column sizes

Question

I have created these CSS classes:

        .table-c {
            border: 1px solid black;
            width:100%;
            height: 30px;
            table-layout: fixed;
        }
        .table-c td {
            border: 1px solid black;
            padding: 10px;
        } 

And this table:

                   <table class="table-c">
                        <tr>
                            <td>REFERENCE NO.</td>
                            <td>DESCRIPTION</td>
                            <td>Invoice DATE</td>
                            <td>INVOICE AMOUNT</td>
                            <td>DISCOUNT TAKEN</td>
                            <td>AMOUNT PAID</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>CHECK DATA</td>
                            <td>CHECK NO.</td>
                            <td>PAYEE</td>
                            <td>DISCOUNT TAKEN</td>
                            <td>CHECK AMOUNT</td>                                
                        </tr> 
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>                           
                    </table>

Table is fixed size as I wanted, but I also need to have different columns have different width. Those columns should not change with and always have it fixed. And also rows height should be fixed.

As in this example:

Here is my try: http://jsfiddle.net/cbafseq6/

As you can see all columns have same width and all rows same height. If I would try for example set height on specific tr element (like style="height: 20px" ) all rows would still have same height.

Answer 1

Not sure the table element is what you want to go with.

Custom width of cells within columns would be available by using multiple tables (one for each row), perhaps, but a single table cannot have columns change width every row.

Maybe try a div layout.

Regarding the height set on tr - you chose a height too small, so there is no effect, a larger value would make the row larger. Again, because of table display settings this works differently and you should probably look for a different layout option.

Answer 2

Just use 2 tables:

 table { border: solid black; border-width: 0 1px; width: 100%; height: 30px; table-layout: fixed; border-spacing: 2px; margin-top: -2px; /* same value as border-spacing */ } td { border: 1px solid black; padding: 10px; } table:first-child { border-top-width: 1px; margin-top: 0; } table:last-child { border-bottom-width: 1px; } 

 <div> <table> <tr> <td>REFERENCE NO.</td> <td>DESCRIPTION</td> <td>Invoice DATE</td> <td>INVOICE AMOUNT</td> <td>DISCOUNT TAKEN</td> <td>AMOUNT PAID</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table> <tr> <td>CHECK DATA</td> <td>CHECK NO.</td> <td>PAYEE</td> <td>DISCOUNT TAKEN</td> <td>CHECK AMOUNT</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> 

Answer 3

Honestly, even though tables are meant to display tabular data, I would go with a div layout here.

You can easily do this with a wrapper and some floated div and then you can do any and all customization you like to any of the "cells". Just my .02

Answer 4

If you want every row to have specific height and every column to have specific width, you can do something like the code below. I used your own code. You can tell me if that helps.

 .table-c { border: 1px solid black; width:100%; height: 30px; table-layout: fixed; } .table-c td { border: 1px solid black; padding: 10px; } 

 <table class="table-c"> <tr> <td style="width: 10%">REFERENCE NO.</td> <td style="width: 30%">DESCRIPTION</td> <td style="width: 10%">Invoice DATE</td> <td style="width: 10%">INVOICE AMOUNT</td> <td style="width: 20%">DISCOUNT TAKEN</td> <td style="width: 20%">AMOUNT PAID</td> </tr> <tr style="height: 200px"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table class="table-c"> <tr> <td style="width: 20%">CHECK DATA</td> <td style="width: 10%">CHECK NO.</td> <td style="width: 40%">PAYEE</td> <td style="width: 10%">DISCOUNT TAKEN</td> <td style="width: 20%">CHECK AMOUNT</td> </tr> <tr style="height: 200px"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>