Ausrichten des Spalteninhalts bei angewendeten Bildlaufleisten

Question

Ich habe eine Situation, in der Daten in verschiedenen Spalten angezeigt werden. Diese Auflistung hat 2 Teile.

1. Eintrag Leiter
2. Körper Eintrag

Körperabschnitt eine max-height haben. Wenn mehr Inhalt vorhanden ist, der diese Höhe erreichen kann, werden die Bildlaufleisten automatisch angewendet.

Jetzt ist das Problem, wenn Bildlaufleisten angewendet werden, dann stört die Ausrichtung des Inhalts in Kopf und Körperabschnitte und sieht seltsam aus.

Gibt es eine mögliche Lösung, um dieses Problem in CSS, JavaScript, jQuery oder auf andere Weise zu beheben, d. H. Inhalte sollten automatisch im Kopf- und Körperbereich ausgerichtet werden, wenn Bildlaufleisten angewendet werden?

* {box-sizing: border-box;} 
 
.listing { 
 
    border: solid #000; 
 
    border-width: 1px 1px 0; 
 
    margin-bottom: 20px; 
 
} 
 
.row { 
 
    overflow: hidden; 
 
} 
 
.col-1, 
 
.col-2 { 
 
    border-bottom: 1px solid #000; 
 
    float: left; 
 
    width: 20%; 
 
} 
 

 
.col-2 { 
 
    width: 40%; 
 
} 
 

 
.col-1 + .col-1, 
 
.col-1 + .col-2, 
 
.col-2 + .col-2, 
 
.col-2 + .col-1 { 
 
    border-left: 1px solid #000; 
 
} 
 

 
.listing-body { 
 
    height: 95px; 
 
    overflow: auto; 
 
}

<h2>Listing with correct alignment</h2> 
 
<div class="listing"> 
 
    <div class="listing-header row"> 
 
    <div class="col-1">Heading 1</div> 
 
    <div class="col-1">Heading 2</div> 
 
    <div class="col-2">Heading 3</div> 
 
    <div class="col-1">Heading 4</div> 
 
    </div> 
 
    <div class="listing-body"> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<h2>Listing with Incorrect alignment</h2> 
 
<div class="listing"> 
 
    <div class="listing-header row"> 
 
    <div class="col-1">Heading 1</div> 
 
    <div class="col-1">Heading 2</div> 
 
    <div class="col-2">Heading 3</div> 
 
    <div class="col-1">Heading 4</div> 
 
    </div> 
 
    <div class="listing-body"> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-1">Data 1</div> 
 
     <div class="col-1">Data 2</div> 
 
     <div class="col-2">Data 3</div> 
 
     <div class="col-1">Data 4</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie sollten wahrscheinlich html tables statt divs verwenden.

<table> 
<thead> 
    <tr> 
    <th>Heading 1</th> 
    <th>Heading 2</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
    <td>Data 1/td> 
    <td>Data 2</td> 
    </tr> 
</tfoot> 
<tbody> 
    <tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    </tr> 
</tbody> 
</table> 

Wenn Sie sich mit divs bestehen, können Sie immer 'display: table' verwenden, um div wie Tisch zu machen verhalten (Sie müssen auch anwenden 'display: table-row' und 'display: table-cell' und Kind-Element damit es funktioniert.)

Answer 2

Ich würde eine Klasse machen, um die Bildlaufleiste mit einem Rand zu kompensieren; zum Beispiel:

.ScrollBarCompensate{margin-right:15px;}

Und dann JQuery diese Klasse anwenden verwenden, wenn Scrollbar

$('.ScrollBarCompensate').hasScrollBar(); //returns true if scrollbar is present

Dann vorhanden ist, können Sie entweder die Klasse hinzufügen, etwa so:

$(".listing").addClass("ScrollBarCompensate");

Oder alternativ, erstellen Sie nicht die CSS-Klasse und nur inline schreiben CSS, was auch immer Sie in der Bildlaufleiste if Anweisung:

$(this).css('margin-right', "15px !important");