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
When I Try to Shift the Image Upwards Using Negative Margin the Whole Container Is Moved Upwards
Why Should One Add Id to Their HTML Tags
Why Does Negative Z-Index and Non-Static Position Disable My Checkbox in Most Browsers
How to Handle HTML5 Constraint Validation Pop-Up Using Selenium
How to Use the Z-Index Properly
How to Render a Field Request Without Refreshing the Page
Table with Fixed Header at Top
How to Apply a Border Only Inside a Table
Google Maps Shows "For Development Purposes Only"
Is It a Bug? Margins of P Element Go Outside the Containig Div
How to Center a Container in My HTML/Css
Why Is a Div Longer Than Several Spans with the Same Content (Only in Chrome)
How to Use the CSS Pseudo-Element :Before{ Content: '' } to Affect an <Option> Element