Reputation: 2021

Setting table row height

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?

Upvotes: 201

Answers (12)

Sayid

Reputation: 30

You need to change the display property for the tr element. You can set it to block or flex.

tr {
    display: flex;
    height: 100px;
}

But this will break your table. And you will have to handle it yourself, with flexbox for example.

Upvotes: 0

Udara_a2z

Reputation: 23

You can try this..

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

worked for me..

Upvotes: 1

Let's App

Reputation: 124

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>

Upvotes: 5

StepUp

Reputation: 38094

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>

Upvotes: 1

Tom Dickman

Reputation: 309

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

Upvotes: 18

Eugene Porodko

Reputation: 314

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

Upvotes: 14

Md. Shafiqur Rahman

Reputation: 3058

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>

Upvotes: 3

1man

Reputation: 5634

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

Upvotes: 4

Alex

Reputation: 6037

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.

Upvotes: 10