I am experimenting with two different bar charts I created using HTML and CSS: horizontal and vertical. How do I move the bars in my vertical bar chart from the center to the bottom?
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Global */
.stat-table-horz, .stat-table-vert {
border-collapse: collapse;
}
.bar {
background: #0c0;
}
/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
border-top: 1px solid #090;
border-bottom: 1px solid #090;
padding: 0;
width: 240px;
}
.stat-table-horz td .horz-bar {
height: 30px;
}
/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
padding: 5px;
}
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
}
.stat-table-vert td .vert-bar {
}
<body>
<table class="stat-table-horz">
<tr>
<td>Health</td>
<td>
<!-- First bar -->
<div class="bar horz-bar" style="width: 10%;"></div>
</td>
</tr>
<tr>
<td>Attack</td>
<td>
<!-- Second bar -->
<div class="bar horz-bar" style="width: 90%;"></div>
</td>
</tr>
<tr>
<td>Speed</td>
<td>
<!-- Third bar -->
<div class="bar horz-bar" style="width: 60%;"></div>
</td>
</tr>
</table>
<br>
<table class="stat-table-vert">
<tr>
<td>
<!-- First bar -->
<div class="bar vert-bar" style="height: 10%;"></div>
</td>
<td>
<!-- Second bar -->
<div class="bar vert-bar" style="height: 90%;"></div>
</td>
<td>
<!-- Third bar -->
<div class="bar vert-bar" style="height: 60%;"></div>
</td>
</tr>
<tr>
<td>Health</td>
<td>Attack</td>
<td>Speed</td>
</tr>
</table>
</body>
My original JSFiddle: https://jsfiddle.net/jkantner/b7aa2yu1/
Just add
.stat-table-vert td {
vertical-align:bottom;
}
Adding vertical-align: bottom to the containing TD seems to do it if I'm understanding you correctly.
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
vertical-align: bottom;
}
Using vertical-align: bottom; or vertical-align: baseline on the td element should fix the issue.
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Global */
.stat-table-horz, .stat-table-vert {
border-collapse: collapse;
}
.bar {
background: #0c0;
}
/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
border-top: 1px solid #090;
border-bottom: 1px solid #090;
padding: 0;
width: 240px;
}
.stat-table-horz td .horz-bar {
height: 30px;
}
/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
padding: 5px;
}
.stat-table-vert tr:first-of-type td {
border-left: 1px solid #090;
border-right: 1px solid #090;
padding: 0;
height: 160px;
width: 80px;
vertical-align: baseline;
}
.stat-table-vert td .vert-bar {
}
<body>
<table class="stat-table-horz">
<tr>
<td>Health</td>
<td>
<!-- First bar -->
<div class="bar horz-bar" style="width: 10%;"></div>
</td>
</tr>
<tr>
<td>Attack</td>
<td>
<!-- Second bar -->
<div class="bar horz-bar" style="width: 90%;"></div>
</td>
</tr>
<tr>
<td>Speed</td>
<td>
<!-- Third bar -->
<div class="bar horz-bar" style="width: 60%;"></div>
</td>
</tr>
</table>
<br>
<table class="stat-table-vert">
<tr>
<td>
<!-- First bar -->
<div class="bar vert-bar" style="height: 10%;"></div>
</td>
<td>
<!-- Second bar -->
<div class="bar vert-bar" style="height: 90%;"></div>
</td>
<td>
<!-- Third bar -->
<div class="bar vert-bar" style="height: 60%;"></div>
</td>
</tr>
<tr>
<td>Health</td>
<td>Attack</td>
<td>Speed</td>
</tr>
</table>
</body>
Vertical align
Add flowing css
.stat-table-vert td {
position: relative;
}
.stat-table-vert .bar.vert-bar{
position: absolute;
bottom: 0;
width: 100%;
}
or
add
.stat-table-vert td {
vertical-align:bottom;
}
https://jsfiddle.net/b7aa2yu1/4/
Related
I have a piece of CSS I am working with. Whenever I add the "display: flex" property to .student, the border suddenly doubles. I need the flex property because I want the text to be centered vertically next to the image inside of the .student table data cell. How can I get rid of this pesky double border? The double border goes away whenever I remove the display:flex property, but then the text is no longer vertically next to the image. I've tried whitespace, border collapse, and several others without any luck.
Codepin: https://codepen.io/dansbyt/pen/dyvoejG?editors=1100
CSS:
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px; left: 0;
width: 100vw; height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;}
/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}
/* Table heading styling */
thead th {
height: 60px; width: 100px;
top: 0; z-index: 2;
position: -webkit-sticky; position: sticky;
border-right: 1px solid gray;
background-color: white;}
thead th:first-child {left: 0; z-index: 10;}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray}
table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
background-color: white}
td.late{background-color: #EA5D6B}
td input {
text-align: center;
padding: 4px; margin: 0;
width: 114px;
border: none;}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
.pic img{display: none}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px; left: 0;
width: 100vw; height: 56px;
border-top: 1px solid #DDDDDD}
HTML:
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
Image of issue:
Instead of using border: 1px solid gray you can try this.
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px;
left: 0;
width: 100vw;
height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;
}
/* Table styling*/
table {
table-layout: fixed;
border-collapse: collapse;
}
/* Table heading styling */
thead th {
height: 60px;
width: 100px;
top: 0;
z-index: 2;
position: -webkit-sticky;
position: sticky;
border-right: 1px solid gray;
background-color: white;
}
thead th:first-child {
left: 0;
z-index: 10;
}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray
}
table .duedate {
font-size: 14px;
margin-bottom: 8px
}
table .title {
font-size: 18px;
color: #5B7042
}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
td.late {
background-color: #EA5D6B
}
td input {
text-align: center;
padding: 4px;
margin: 0;
width: 114px;
border: none;
}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: -1px;
}
.pic {
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;
}
.pic img {
display: none
}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px;
left: 0;
width: 100vw;
height: 56px;
border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
My assumption is that problem arises from clashing between two layout alghorithms, table and flex one. Td belongs to table one and putting flex there just make problems.
So only solution is to wrap td content with div, and put flex onto that div.
table{
border-collapse: collapse;
}
td{
border: 1px solid;
}
.flex{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<th>flex</th>
<th>flex</th>
<tr>
<td class='flex'>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td class='flex'>...</td>
</tr>
</table>
<table>
<th>div flex</th>
<th>div flex</th>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
</table>
</body>
</html>
I want to create a responsive table only with HTML & CSS that has a icon button aligned to right side when on responsive view as similar to the bellow image. The bellow code renders a responsive table, however the icon is also aligned on the next line. I want it to be aligned on right side as in image. any one Please help on this.
table {
border: 1px solid #ccc;
border-radius: 5px;
/* border-collapse: collapse; */
margin: 0;
padding: 0;
width: 50%;
table-layout: fixed;
}
table tr {
background-color: white;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
font-size: 15px;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
width: 100%
}
table thead {
border: none;
/* clip: rect(0 0 0 0); */
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 1px solid #ddd;
display: block;
/* margin-bottom: .625em; */
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 13px;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Upload Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
</tbody>
</table>
Im facing two problems which are related with each other as i can assume. My webpage is not being fully displayed, a lot of content is hidden down and the scrollbar at the right side and the vertical one are not shown. I have tried to solve that with the overflow property in the body, the scrollbar was there but invisible so it didnt help me a lot. I want the content to be visible even though im zooming in(200% or whatever)
here is a snippet of my code
<nav class="sideBar">
<div class="sideBarHeader" id="wrapper">
<div class="dropdown">
</div>
<div class="ono">
<p style="font-size: 48px;">XXX</p>
</div>
</div>
<div style="padding-left: 2px;">
<div class="searchContainer">
</div>
</div>
</nav>
<div class="mainContentClient">
<div class="clientHeader">
</div>
<div class="clientContent"> <!-- the client content class is not defined yet -->
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;"></th>
</tr>
<tr style="background-color: #DEDEDE; height: 100px;">
<td style="border-bottom: 0;">STATS</td>
</tr>
</table>
<div style="height: 100%;" id="wrapper"> <!-- subcontent -->
<!-- left tables -->
<div class="leftClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="vehicle/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="cargounit/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
</div>
<!-- right table + Map -->
<div class="rightClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;" colspan="2">
info
</th>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
</th>
</tr>
<tr>
<td style="border-bottom: 0;"> <!-- map properties -->
<div id="Map" class="mapStyling"></div>
<script>
var lat = 47.35387;
var lon = 8.43609;
var zoom = 18;
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and the css :
.sideBar {
height: 100%;
width: 17%;
position: fixed;
top: 0;
left: 0;
background-color: #C0C0C0;
max-width: 250px;
min-width: 250px;
overflow: auto;
}
.sideBarHeader {
padding: 4% 8%;
padding-left: 10%;
height: 85px;
}
.clientHeader {
font-size: 48px;
height: 130px;
}
.mainContentClient {
position: fixed;
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
.ono {
width: 180px;
text-align: right;
/* keep the ono aligned, use a negativ margin*/
margin-top: -28%;
}
.clientContent {
height: 100%;
width: 1130px;
max-width: 1500px;
min-width: 1000px;
}
.leftClientContent {
width: calc(100% - 850px);
margin-top: 2%;
}
.rightClientContent {
width: 850px;
margin-top: 2%;
margin-left: 10px;
}
.mapStyling {
width: 102.5%;
height: 300px;
margin-left: -20px;
}
/* default settings for the tables in part management*/
table.onoTable{
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
}
table.onoTable th {
background-color: #FBD85C;
border-width: 0 10px;
border-color: #f1f1f1;
border-style: solid;
height: 62.5px;
font-size: 24px;
}
table.onoTable th:first-child {
border-left: 0;
}
table.onoTable th:last-child {
border-right: 0;
}
table.onoTable td {
border-width: 0 10px 4px 10px;
border-color: black #f1f1f1;
border-style: solid;
height: 50px;
font-size: 24px;
}
table.onoTable td:first-child {
border-left: 0;
}
table.onoTable td:last-child {
border-right: 0;
}
/**/
table.noBorder_1_2 td:nth-child(1) {
border-right: 0;
}
table.noBorder_1_2 td:nth-child(2) {
border-left: 0;
}
table.centerContent_24 th, table.centerContent_24 td {
text-align: center;
font-size: 24px;
}
tr.borderBottom_0 > td {
border-bottom: 0;
}
.backgroundColor_grey {
background-color: #DEDEDE;
}
/* shift the content of the main table of the management table a little bit to the right side*/
table.paddedManagementTableContent td {
text-align: left;
padding-left: 20px;
}
table.paddedManagementTableContent th {
text-align: left;
padding-left: 30px;
width:30%;
}
table.paddedManagementTableContent th:first-child {
text-align: left;
padding-left: 20px;
}
here is a live demo
https://jsfiddle.net/edwjvmsc/
thanks everyone!
Well, I'm not sure if this would be correct answer. but I removed the 'position:fixed' property from 'mainContentClient' class and the scrollbar is showing and you can scroll your content. Try it and let me know if it helped :).
.mainContentClient {
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
I have begun creating an OrgChart using HTML and CSS. One issue I have run into is creating an intersecting chart flow-line between <tr> and <td> elements.
I created container, vertical-line and horizontal-line definitions that I wrapped into <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` for the horizontal-line to intersect in the middle with the vertical-line. However, the line remains at the bottom.
I have added the CSS and HTML to my post and hope that one of you can help me on what I am doing wrong.
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: auto;
}
tr {
border: none;
}
th,
td {
border-collapse: collapse;
border: 1px solid black;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100;
}
div.container {
width: 40px;
}
div.vertical-line {
border-left: 1px solid red;
height: 55px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
div.horizontal-line {
border-bottom: 1px solid red;
height: 1px;
margin-top: auto;
margin-bottom: auto;
width: 40px;
}
<table>
<tr>
<td style="background-color: goldenrod" colspan="3">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
<tr>
<td style="width: 42.5%; background-color: wheat">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
<td style="width: 15%">
<div class="container">
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
<td style="width: 42.5%">
<div style="background-color:#CCFFCC">Dept
</br>
<b>EmpName</b>
<div style="border-bottom: 1px solid">
</div>
<div style="background-color:#CCFFFF">Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
</table>
Here's a workaround:
add another horizontal line before the vertical line:
<td style="width: 15%">
<div class="container">
<div class="horizontal-line"> </div>
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
Then change the display of it's container to flex:
div.container {
display: flex;
width: 40px;
}
I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside td tags in order to look it nice? The result I have now is here:
Current result with no position formatting
I want it to look like like this:
The way it's supposed to look
I've tried to do it with CSS formatting using relative position feature like this
.leftSide
{
position: relative;
bottom:250px;
}
And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of td tag, but then I do it, elements are out of the table). How can I avoid it?
My whole code below:
.splitTable {
width: 100%;
height: 100%;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
border-collapse: collapse;
width: 30%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
position: relative;
bottom: 250px;
}
.rightSide {
position: relative;
bottom: 250px;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest" width="25%">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Hope, this helps :)
.splitTable {
width: 100%;
height: 100vh;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
position: relative;
width: 50%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
margin-top:30px;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
display: flex;
flex-direction:flex-end;
position: absolute;
top: 20px;
width:90%;
left:50%;
transform:translateX(-50%);
}
.leftSide>* {
flex: 1;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
margin: 5px;
border-collapse: collapse;
}
.rightSide {
position: absolute;
top: 20px;
left:50%;
transform:translateX(-50%);
width:90%;
}
.addButton {
float:right;
margin-right:5%;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>