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 http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell and http://stackoverflow.com/questions/15115052/bootstrap-how-to-set-up-fixed-width-for-td — Scanner, Nov 09 '15 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, Nov 09 '15 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, Nov 09 '15 at 15:11

marym92 · Accepted Answer · 2015-11-09T15:06:43.760

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>

Sorry, while saving I lost some code :P I updated my answer! — marym92, Nov 09 '15 at 15:08
Same as mine, but with extra separation line between tables. — Qwertiy, Nov 09 '15 at 15:09

score 0 · Answer 2 · answered Nov 09 '15 at 14:44

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.

score 0 · Answer 3 · answered Nov 09 '15 at 14:44

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 09 '15 at 14:44

Qwertiy

19,681
15
61
128

`border-collapse: collapse;` that to make it more akin to his original example. – Alexander Dixon Nov 09 '15 at 14:54
Thanks, but I think I would need 4 tables? Because I need custom height for every row. – Andrius Nov 09 '15 at 14:56
@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 Nov 09 '15 at 15:03
@Andrius, how does the height depends on number of tables? – Qwertiy Nov 09 '15 at 15:03
Well setting `tr` to specific height does not work. So I wonder how can I specify different height for different row? – Andrius Nov 10 '15 at 07:13
@Andrius, why? Anyway, you can set the minimal height to any cell in the row. – Qwertiy Nov 10 '15 at 07:34

score 0 · Answer 4 · answered Nov 09 '15 at 14:50

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 09 '15 at 14:50

VikingBlooded

884
1
6
17

CSS - create table with fixed size and custom column sizes

4 Answers4