Css/Tables: Parallel Two Columns for Different Languages

text of two tables with same width and td are not aligned in same line

I use jQuery to make this happen please check that if this is what you
are looking for. you can try removing some data rows it will not show
scroller


CODEPEN LINK

[https://codepen.io/feizel/pen/QQZqpR?editors=1111][1]

var contentHeight =  jQuery(".faizal--block").outerHeight();

var absoluteHeight = 100;

if(contentHeight > absoluteHeight){

jQuery('.faizal--block').addClass('scrolling');

jQuery('.headings').css('width', 'calc(100% - 15px)');

}else {

jQuery('.headings').css('width', 'calc100%');

}
table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

.headings{

list-style-type: none;

padding: 0;

width: 100%;

margin: 0;

}

.contents {

list-style-type: none;

padding: 0;

width: 100%;

margin: 0;

}

.headings td,

.contents td {

width: 20%;

padding: 10px;

}

.content-subblock {

overflow: auto;

background-color:white;



}

.scrolling{

max-height:100px;

}

.scrolling_none{

height:auto;

overflow:hidden;

}

.headings td, .contents td{

padding:0;

background:red;

border:none;

color:#fff;

text-indent:15px;

}

.headings td{

background:#bc2d2d;

}

.contents td{

background:grey;

}

.headings{

background:red;

font-weight:bold;

background:#bc2d2d;

}

td{

height:50px;

border:3px solid #333 !important;

font-size:16px;

padding:0 !important;

width:300px !important;

line-height:50px;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content-block">

<div class="container">

<div class="content-subblock">

<table class="headings" cellspacing="0" cellpadding="0">

<tr>

<td>heading1</td>

<td>heading2</td>

<td>heading3</td>

<td>heading4</td>

<td>heading5</td>

</tr>

</table>

</div>

<div class="content-subblock faizal--block">

<table cellspacing="0" cellpadding="0" class="contents">

<tr>

<td>link1</td>

<td>link2</td>

<td>link3</td>

<td>link4</td>

<td>link5</td>

</tr>

<tr>

<td>link1</td>

<td>link2</td>

<td>link3</td>

<td>link4</td>

<td>link5</td>

</tr>

<tr>

<td>link1</td>

<td>link2</td>

<td>link3</td>

<td>link4</td>

<td>link5</td>

</tr>

<tr>

<td>link1</td>

<td>link2</td>

<td>link3</td>

<td>link4</td>

<td>link5</td>

</tr>

</table>

</div>

</div>

</div>

HTML,CSS — How to horizontally center two tables side by side

You can use flexbox on the container div, apply justify-content: center; to center them, remove the floats and use a margin on one of the tables to create a distance between them.

.wrap {

display: flex;

align-items: center;

justify-content: center;

}

table {

border: 1px solid #555;

}
<div class="wrap">

<table style="margin-right:10%;">

<tr>

<td>abc</td>

</tr>

</table>

<table>

<tr>

<td>xyz</td>

</tr>

<tr>

<td>xyz</td>

</tr>

<tr>

<td>xyz</td>

</tr>

</table>

</div>


Related Topics



Leave a reply



Submit