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.

Andrius can you not use Bootstrap? Possible help here stackoverflow.com/questions/4457506/… and stackoverflow.com/questions/15115052/… — Scanner
– Scanner, Commented Nov 9, 2015 at 14:46
The "problems" you have are caused by how tables are meant to work. For different column widths, you will need separate tables. All cells in one row will always automatically have the same height as the one with the highest content. Also, you cannot control or limit the height of a table-cell - it is always defined by its content (at least the min-height). Also, you cannot control overflow on table-cells, neither x nor y. — connexo
– connexo, Commented Nov 9, 2015 at 15:05
@connexo, if you want to control overflow, you can. Anyway, you can change display property to any nontable value and use table as it was not a table. — Qwertiy
– Qwertiy, Commented Nov 9, 2015 at 15:11

marym92 · Accepted Answer · 2015-11-09 15:06:43Z

2

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>

edited Nov 9, 2015 at 15:06

answered Nov 9, 2015 at 14:58

marym92

386 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marym92 Over a year ago

Sorry, while saving I lost some code :P I updated my answer!

Qwertiy Over a year ago

Same as mine, but with extra separation line between tables.

JNF · Accepted Answer · 2015-11-09 14:44:05Z

0

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.

answered Nov 9, 2015 at 14:44

JNF

3,7403 gold badges35 silver badges65 bronze badges

Comments

Qwertiy · Accepted Answer · 2015-11-09 14:44:27Z

0

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>

answered Nov 9, 2015 at 14:44

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

6 Comments

Alexander Dixon Over a year ago

border-collapse: collapse; that to make it more akin to his original example.

Andrius Over a year ago

Thanks, but I think I would need 4 tables? Because I need custom height for every row.

Qwertiy Over a year ago

@AlexanderDixon, I expected that he wants spacing. Yes, it's possible to add border-collapse: collapse; and remove border-spacing: 2px; margin-top: -2px;.

Qwertiy Over a year ago

@Andrius, how does the height depends on number of tables?

Andrius Over a year ago

Well setting tr to specific height does not work. So I wonder how can I specify different height for different row?

|

VikingBlooded · Accepted Answer · 2015-11-09 14:50:24Z

0

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

answered Nov 9, 2015 at 14:50

VikingBlooded

8591 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

CSS - create table with fixed size and custom column sizes

4 Answers 4

2 Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related