Setting table row height

Question

I have this code:

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?

user_7275613 · Answer

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...

user_10063896 · Answer

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;
}

user_8229154 · Answer

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 1
                    
                
                
                    
                        Row 1 - Click Me to See Row 2
                    
                    
                        Row 2
                    
                    
                        Row 3 - Click Me to See Row 4
                    
                    
                        Row 4
                    
                
            

            
            
                
                    
                        TABLE 2
                    
                
                
                    
                        Row 1 - Click Me to See Row 2
                    
                    
                        Row 2
                    
                    
                        Row 3 - Click Me to See Row 4
                    
                    
                        Row 4

user_4619541 · Answer

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

xxxyyyzzz

user_1646240 · Answer

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;
}

  
    
      
          This is very long text 1 2 3 4 5 6 7 8
      
      
          This is very long text 1 2 3 4 5 6 7 8
      
      
          This is very long text 1 2 3 4 5 6 7 8
      
      
          This is very long text 1 2 3 4 5 6 7 8

user_10174168 · Answer

You can try this..

{line-height: 15px;} /{height:15px;} / padding: 5px 5px; worked for me..

Setting table row height

11 Answers