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?
10 Answers
try this:
.topics tr { line-height: 14px; }
try setting the attribute for td
so:
.topic td{ height: 14px };
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...
You can remove some extra spacing as well if you place a border-collapse: collapse; CSS statement on your table.
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.
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;
}
If you are using Bootstrap, look at padding of your tds.
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>
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>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>
