Ik heb deze 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>
De rijen staan te ver uit elkaar. Ik wil de lijnen dichter bij elkaar.
Wat ik deed was de volgende CSS toevoegen, maar het lijkt niets te veranderen.
.topics tr { height: 14px; }
Wat doe ik verkeerd?
Antwoord 1, autoriteit 100%
probeer dit:
.topics tr { line-height: 14px; }
Antwoord 2, autoriteit 14%
probeer het kenmerk in te stellen voor td
dus:
.topic td{ height: 14px };
Antwoord 3, autoriteit 5%
Je kunt ook wat extra spaties verwijderen als je een border-collapse: collapse;CSS-statement op je tabel plaatst.
Antwoord 4, autoriteit 5%
Ik vond dat het beste antwoord voor mijn doeleinden het volgende was:
.topics tr {
overflow: hidden;
height: 14px;
white-space: nowrap;
}
De white-space: nowrapis belangrijk omdat het voorkomt dat de cellen van je rij over meerdere regels breken.
Persoonlijk voeg ik graag text-overflow: ellipsistoe aan mijn then tdelementen om de overlopende tekst er mooier uit te laten zien door de volgpunten, bijvoorbeeld Too long gets dots...
Antwoord 5, autoriteit 4%
line-height werkt alleen als deze groter is dan de huidige hoogte van de inhoud van <td>. Dus als je een pictogram van 50×50 in de tabel hebt, zal de regelhoogte treen rij niet kleiner maken dan 50px (+ opvulling).
Aangezien je de opvulling al op 0hebt gezet, moet het iets anders zijn,
bijvoorbeeld een grote lettergrootte binnen tddie groter is dan uw 14px.
Antwoord 6, autoriteit 3%
Wat mij betreft, heb ik besloten om paddings te gebruiken.
Het is niet precies wat je nodig hebt, maar kan in sommige gevallen nuttig zijn.
table td {
padding: 15px 0;
}
Antwoord 7, autoriteit 2%
Als je Bootstrap gebruikt, kijk dan naar paddingvan je tds.
Antwoord 8
wanneer ik de hoogte van een bepaalde waardevolle rij moet corrigeren
door inline CSS als volgt te gebruiken..
<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
Antwoord 9
Het lijkt erop dat heightvan rowafhangt van heightvan td. Dus we kunnen wat divplaatsen en heightinstellen op die divom heightvan row.
Een voorbeeld:
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>Antwoord 10
Het volgende zal een tabelrij (tr) uitvouwen/samenvouwen, rekening houdend met het feit dat je meerdere tabellen hebt, vandaar de noodzaak voor wat kleine js. Zeer weinig codering 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>