How do I place a number of tables on one line? - html

I have a <div> with a number of <tables> in it, how do I get these <tables> on one line?
<html>
<head>
<title>no-line-break</title>
<style type="text/css">
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
}
.bar
{
float: left;
width: 150px;
margin: 5px;
}
.bar th
{
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div id="foo">
<table class="bar">
<tr>
<th>
Foo #1
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #2
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
<tr>
<td>
Bar #2
</td>
</tr>
<tr>
<td>
Bar #3
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #3
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #4
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<div style="clear: both;"> </div>
</div>
</body>
</html>


You will need to add another div inside #foo that is at least as wide as the sum of all tables with their margins and paddings so that they won´t wrap.
example:
<html>
<head>
<title>no-line-break</title>
<style type="text/css">
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
}
#foo_inner
{
width: 650px;
}
.bar
{
float: left;
width: 150px;
margin: 5px;
}
.bar th
{
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div id="foo">
<div id="foo_inner">
<table class="bar">
<tr>
<th>
Foo #1
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #2
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
<tr>
<td>
Bar #2
</td>
</tr>
<tr>
<td>
Bar #3
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #3
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #4
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>


Perhaps a traditional table layout may be what you're going for.
http://jsfiddle.net/T8pfZ/2


Make all of them display:inline. So, do this:
.bar
{
float: left;
width: 150px;
margin: 5px;
display: inline;
}
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
display: inline;
}


Try adding "display:inline;" to your Foo CSS block. You may have to adjust your width.


If I understand you, you cant all the tables in the same line, so you need to put the display:inline in the #foo style.
#foo {
display:inline
}

Related

Make whole table fill remaining print page

All of this is made with angular 12 and with ngx-print library
I have tabular data that I needs to display and I achieved the look and feel with HTML :
<div id="changeOrder">
<body>
<div *ngIf="allReports">
<!-- style="size: A4; display: block;height: 100%;" -->
<table style="size: A4; height: 100%;" *ngFor="let item of response">
<!-- Here the header starts -->
<div class="">
<div class="">
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="" style=" border-bottom: 1px solid black;">
<div class="">
<div class="">
<img src="../../../../../../../assets//img/logo_rr.png" alt="Logo"
style="height: 50px;" />
</div>
<table style="width:100%;">
<thead class="" style="width:100%;">
<tr>
<td style="width:155px;">
<h2>Change Order</h2>
</td>
<td>
<h2>{{item.CHANGEORDERID}} </h2>
</td>
</tr>
</thead>
</table>
</div>
</div>
</td>
</tr>
</div>
</div>
<!-- Here the header Ends -->
<tbody style="display: block;height: 100%;">
<tr>
<td>
<h3>Tasks</h3>
<table style="size: A4; height: 100%;">
<thead>
<tr>
<td>
<b>Name</b>
</td>
<td style="width:400px">
<b>Description</b>
</td>
<td>
<b>Status</b>
</td>
<td>
<b>Due Date</b>
</td>
</tr>
</thead>
<tbody *ngFor="let child of item.taskChild;">
<tr>
<td>{{ child.TDOTNUMBER }} </td>
<td style="width:400px">{{child.TASKSUMMARY}} </td
<td>{{child.TSTATUS}}</td>
<td>{{child.TDUEDATE_ORIG_TYPE}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr class="outer-row">
<td>
<div class="page-footer-space">
<!-- <b>Printed On</b> {{printedDate}} -->
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</div>
and with this CSS :
.page-footer-space,
.page-footer {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0px;
/* width: 100%; */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm !important;
size: landscape;
}
#media print {
table {
font-size: .8rem;
width: 100%;
height: 90vh;
border: solid;
table-layout: fixed;
}
tbody {
margin: 10mm;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
}
Basically the data when it gets printed it look great,sometimes each report occupies more than 1 page, but what I need to achieve is that whenever an item of response is finished it does not matter at what point of the printing page it finished, the rest of the page needs to be blank and then the next item in the iteration should be printing.
I have not been successful in achieving that break-page at the end of the table.
This is how it currently looks:

how to prevent the tbody from overlapping with tfoot

I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

How to right align numbers in the center of a table cell?

Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.

Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>

TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>

make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>

<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;

One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>

Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>

.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>

text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>

HTML - Table -vertical position text within cell

I would like to have text within a table cell to be positioned a little bit higher, near the top. Please take a look at the provided screenshot. You can see in the TD below Column 1 how I want it to look like:
https://jsfiddle.net/38f1aru6/1/
HTML:
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
CSS:
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
I'm new to HTML and CSS... and a little bit shocked how complicated some simple styling can be.
My first guess was text alignment within a cell... vertical-align? Didn't work.
Then I tried to use an element with absolute positioning within an element with relative positioning. It did work ... almost ... but the text did flow out of the cell.
I would be very grateful if you could show me the right direction to solve this (easy?) task.
Edit:
I want to keep the yellow bar in the same position, but I want to move the text within the bar upward.

It seems from comments that you want to keep the yellow bar in the same position, but you want to move the text in it upward. That is not hard, but it does involve adding extra markup; otherwise it's impossible to separate the text from the background in that way. So, here you go.
.yellow_marked {
background-color: yellow;
}
table {
border: 1px solid black;
}
td, th {
border: 1px solid;
}
/* added css */
caption {
font-weight: bold
}
.yellow_marked>span {
position: relative;
top: -2px;
}
<table class="table_text">
<caption>
Title
</caption>
<tbody>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
</tr>
<tr>
<td>
<span class="td_content yellow_marked"><span>Cell content here</span></span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
Also, I'm sorry for changing your HTML, but you were using non-semantic markup for the title and the column headers, not to mention obsolete and unnecessary elements; couldn't bear to leave those in.
If you want, you can use the new CSS with the old HTML though.

you can use vertical-align:super on the span inside ( on .td-content )
see snippet below or jsFiddle
let me know if this is what you want
.td_content
{
vertical-align:super;
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>

vertical-align:top works.
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
height: 50px;
vertical-align: top; /* To move the text to the top */
padding-top: 5px; /* To create a gap at the top */
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>

You could add the yellow background to the td instead. And then use a negative margin on the span element.
fiddle
.td_content {}
.yellow_marked {
background-color: yellow;
}
.yellow_marked span {
display: block;
margin-top: -4px;
}
table {
border: 1px solid black;
}
td {
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td class="yellow_marked">
<span class="td_content">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>

How to force or bring vertical scroll bar to front in html css

I would like to bring this vertical scroll bar to the front. Here is the image.
I do not know how to set it.
UPDATE
I did a work around but the wrong part is that the items text element are not hidding behind the header. Here is my fiddle
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
background: red;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>

As the scrollbar is on your table, there's no way you can have the scrollbar on top of the table header, and your table below the table header. Your best bet is to have it offset from top the height of the header:
So change your current CSS for your table body:
.table-body
{
position: relative;
overflow: auto;
height: 30%;
margin-top: 25px;
}
See this fiddle.

Update
Instead of adding padding-top:25px you need to add margin-top:25 to .table-body
This should work. Adding z-index to .table-header will fix the issue.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
z-index:1000;
background: red;
}
.table-body
{
position: relative;
margin-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>

You can bring header on front by using z-index and after that just adjust the width of header to scroll-bar.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 96.8%;
background: red;
z-index:1;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>