Setting table row height

Question

I have this code:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

The rows are spaced too far apart. I want the lines closer together.

What I did was to add the following CSS but it doesn't seem to change anything.

.topics tr { height: 14px; }

What am I doing wrong?

Related: http://stackoverflow.com/questions/2092696/how-to-fix-height-of-tr — Thilo, Jul 27 '16 at 00:22

score 217 · Accepted Answer · edited May 02 '13 at 15:37

217

try this:

.topics tr { line-height: 14px; }

edited May 02 '13 at 15:37

Sam Mussmann

5,883
2
29
43

answered Jun 18 '11 at 18:56

refaelos

7,927
7
36
55

237

I don't understand why this has so many votes, it doesn't resolve the problem. It only works if you only have 1 line of text in the `tr`. This solution sets the *line* height, not the `tr` height. – BenR Jun 03 '14 at 15:23
4

As mentioned in a later comment. the height has to be bigger than the height of your largest content. Otherwise, it will just use the height of the largest content as the minimum height. And yes, this only works for one line of text. – Varun Chatterji Jun 07 '16 at 17:33
2

It is useful only in the case of one line text. – shekhardtu May 31 '18 at 17:16

score 38 · Answer 2 · answered Jun 18 '11 at 18:54

38

try setting the attribute for td so:

.topic td{ height: 14px };

answered Jun 18 '11 at 18:54

dave

12,406
10
42
59

13

[Doesn't **seem** to work (Chromium 12/Ubuntu 11.04)](http://jsfiddle.net/davidThomas/9eUts/). – David Thomas Jun 18 '11 at 18:58
1

seriously? I thought this would always have worked. it certainly does now. anyway this is the solution I found to be best since the way table cells work is to expand to their content. so `height` in a `td` is effectively min-height, which in this case is actually what you want – Simon_Weaver Aug 03 '14 at 23:21
@dave In my case also only `@dave`'s solution worked. `line-height` did not work either with `tr` or `td`. Not sure if it has something to do with the timing since the original post is six years old and some of html/css rules may have changed by now as most of the browsers are now using HTML5. – nam Aug 27 '17 at 15:18
Also, *in my experience*, if you set a height on tr and then a 100% height or any height on the td inside it, I believe the system thinks that the height is set on the td and it doesn't follow height of the tr and the row is set to the default height. So just set the height on the td. This is the reason I upvoted this answer – user3245268 Feb 26 '19 at 15:46
I used this on the single td that I needed the extra height on. Worked fine. – Schwarz Software Apr 13 '23 at 07:42

Tom Dickman · Answer 3 · 2021-01-27T23:07:04.700

I found the best answer for my purposes was to use:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

The white-space: nowrap is important as it prevents your row's cells from breaking across multiple lines.

I personally like to add text-overflow: ellipsis to my th and td elements to make the overflowing text look nicer by adding the trailing fullstops, for example Too long gets dots...

score 12 · Answer 4 · answered Jul 16 '20 at 14:14

12

As for me I decided to use paddings. It is not exactly what you need, but may be useful in some cases.

table td {
    padding: 15px 0;
}

answered Jul 16 '20 at 14:14

Eugene Porodko

186
1
7

score 11 · Answer 5 · answered Jun 18 '11 at 18:59

11

You can remove some extra spacing as well if you place a border-collapse: collapse; CSS statement on your table.

answered Jun 18 '11 at 18:59

fijter

17,607
2
25
28

score 9 · Answer 6 · answered Dec 14 '15 at 22:10

line-height only works when it is larger then the current height of the content of <td> . So, if you have a 50x50 icon in the table, the tr line-height will not make a row smaller than 50px (+ padding).

Since you've already set the padding to 0 it must be something else,
for example a large font-size inside td that is larger than your 14px.

Let's App · Answer 7 · 2021-06-11T00:36:56.537

The following will expand/collapse a Table Row (tr) taking into account if you have multiple Tables hence the need for some minor js. Very little coding IMO

function row_expand_collapse(e){

  //get table id so you know what table to manipulate row from
  const tableID = e.parentNode.parentNode.id;

  //get row index and increment by 1 so you know what row to expand/collapse
  const i = e.rowIndex + 1;

  //get the row to change the css class on
  let row = document.getElementById(tableID).rows[i]

  // Add and remove the appropriate  css classname to expand/collapse the row

  if (row.classList.contains('row-collapse')){
    row.classList.remove('row-collapse')
    row.classList.add('row-expand')
    return
  }
  if (row.classList.contains('row-expand')){
    row.classList.remove('row-expand')
    row.classList.add('row-collapse')
    return
  }
}

.row-collapse td{
  padding: 0px 0px;
  line-height: 0px;
  white-space: nowrap;
  overflow: hidden;
  transition-duration: .75s;
}
.row-expand td {
  line-height: 100%;
  transition-duration: .75s;
}
table, th, td{
  width: 75%;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 15px 15px;
  margin: 15px 15px;
  text-align: center;
}

            <table id="Table-1">
                <thead>
                    <tr>
                        <th colspan="10">TABLE 1</th>
                    </tr>
                </thead>
                <tbody id="Tbody-1">
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 1 - Click Me to See Row 2</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 2</td>
                    </tr>
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 3 - Click Me to See Row 4</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 4</td>
                    </tr>
                </tbody>
            </table>

            
            <table id="Table-2">
                <thead>
                    <tr>
                        <th colspan="10">TABLE 2</th>
                    </tr>
                </thead>
                <tbody id="Tbody-2">
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 1 - Click Me to See Row 2</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 2</td>
                    </tr>
                    <tr onclick="row_expand_collapse(this)">
                        <td colspan="10">Row 3 - Click Me to See Row 4</td>
                    </tr>
                    <tr class="row-collapse">
                        <td colspan="10">Row 4</td>
                    </tr>
                </tbody>
            </table>

score 4 · Answer 8 · answered Feb 12 '16 at 22:53

4

If you are using Bootstrap, look at padding of your tds.

answered Feb 12 '16 at 22:53

1man

5,216
7
42
56

score 2 · Answer 9 · answered Oct 12 '16 at 09:39

2

once I need to fix the height of a particular valued row by using inline CSS as following..

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

answered Oct 12 '16 at 09:39

Md. Shafiqur Rahman

2,878
27
24

score 1 · Answer 10 · answered May 30 '21 at 12:41

It looks like height of row depends on height of td. So we can put some div and set height to that div to fix height of row.

An example:

td.table-column > div.item {
  height: 20px;
  overflow:hidden;
  background-color: lightpink;
}

  <table>
    <tr>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
      <td class="table-column">
          <div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
      </td>
    </tr>
</table>

this helped me. because you need to give height to div items inside table td, thank you — Mohsin Khan, Oct 07 '22 at 06:29

Udara_a2z · Answer 11 · 2022-09-28T15:03:09.993

1

You can try this..

{
   line-height: 15px;  //or
   height:15px;        //or
   padding: 5px 5px;   
}

worked for me..

edited Sep 28 '22 at 15:03

answered Sep 20 '22 at 06:06

Udara_a2z

33
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 23 '22 at 13:58

Setting table row height

11 Answers11

Linked