I'm doing a print in razor view with ASP.NET Core 6.
I am having a problem, I have only one table to display data. And at the moment of making the impression, it does it perfectly, but it adds 2 sheets, 1 where the table is and the other blank. What I want to achieve is that it prints only the table, I don't want the blank page. I've been looking for a lot of information, but I'm new to printing. I'd be very glad if someone could give me some advice.
Thank you very much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta name="description" content="">
<meta name="author" content="">
<style>
.containerInfo {
padding-top: 20px;
}
.primerSeccion {
display: flex;
}
.segundaSeccion {
display: flex;
}
.terceraSeccion {
display: flex;
}
.cuartoSeccion {
display: flex;
}
.quintaSeccion{
display:flex;
}
</style>
</head>
<body style="height: 210mm; width: 297mm; margin-left: auto; margin-right: auto">
<div class="">
<table style="width: 100%">
<tr class="trColoridos">
<th style="font-weight:700;">OR</th>
<th style="font-weight:700;">Descripcion</th>
<th style="font-weight:700;">Canti</t>
<th style="font-weight:700;">Ancho</th>
<th style="font-weight:700;">Altura</th>
<th style="font-weight:700;">Metros</th>
<th style="font-weight:700;">Acumulado</th>
<th style="font-weight:700;">Unid</th>
<th style="font-weight:700;">Bisel</th>
<th style="font-weight:700;">Tipo:Arenado</th>
</tr>
<tbody>
#foreach (var item in Model.PresupuestoDetalle)
{
<tr>
<td style="text-align: center">#Html.DisplayFor(modelItem =>item.Presupuesto.Numero) </td>
<td style="padding-left: 15px">#Html.DisplayFor(modelItem => item.Descripcion)</td>
<td style="text-align: center">#Html.DisplayFor(modelItem => item.Cantidad)</td>
<td style="text-align: center">#Html.DisplayFor(modelItem => item.Ancho)</td>
<td style="text-align: center">#Html.DisplayFor(modelItem => item.Alto)</td>
<td style="text-align: center">#Html.DisplayFor(modelItem => item.Metros)</td>
<td style="text-align: center"></td>
<td style="text-align: center"> </td>
<td style="text-align: center"></td>
<td style="text-align: center"></td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Try to add the following code to <style></style>:
##media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
Related
I want to generate an email including some table data and use PLQL to send this to company members. So far I am using some HTML templates and Oracles UTL_mail. I did send emails to a Gmail web interface and to Outlook. As the style seems okay in Gmail, I guess that it is an Outlook issue. I am a complete beginner when it comes to HTML and I am open to any suggestions and workarounds so that the table looks somewhat smooth for Outlook, too.
Below Code will not show any border for Outlook but it does for Gmail and within the W3School-Try-It editor.
utl_mail.send(sender => 'noreply#mycompany.de'
, recipients => 'me#gmail.com,me#mycompany.de'
, subject => 'Test Table'
, message =>
'<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Oracle Table</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
table.table {
width: 80%;
}
.table th {
text-align: left;
}
table, th, td {
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 2rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
img {
width: 200px
}
#media screen and (max-width: 1200px) {
body {
font-size: 150%;
}
table {
width: 100%;
}
table.table {
width: 60%;
font-size: 100%;
}
tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0.5em 0;
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
td, th {
flex: 1 1 150px;
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 1rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
}
</style>
</head> <body> <p> This is a table</p> <br>
<table class="table">
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th> </tr>
<tr> <td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td> </tr>
<tr> <td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td> </tr>
<tr> <td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td> </tr>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
'
, mime_type => 'text/HTML; charset= utf-8'
);
Debug the code incrementally starting from a minimal representative example and, when that is working, incrementally include extra functionality.
Start without any CSS:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Oracle Table</title>
</head>
<body>
<p> This is a table</p><br />
<table class="table">
<thead>
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th>
</tr>
</thead>
<tbody>
<tr>
<td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td>
</tr>
<tr>
<td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td>
</tr>
<tr>
<td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td>
</tr>
</tbody>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
Note: I added / to the self-closing tags and added thead and tbody tags; these aren't required (for HTML), just my personal preference.
Test if that displays as expected.
Add in a single CSS statement:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
</style>
and test.
Add another CSS statement and test and repeat until you find where it breaks.
I alredy set a :hover effect on the rows of the table using CSS.
The only problem is the hover effect doesn't work, if a table cell has a specific background color, e.g. green. In the sample code this means the 3rd column doesn't change the background color from green (resp. red) to #96c7ef as soon as you move the mouse over it. (It's ok, that the first row also doesn't change the background color. This is intentionally skipped using <thead>.) On the other cells, that don't have any background color, the hover works.
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
basic.css
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
The hover effect also has the same behaviour, if the style declaration of the two cell (tdX, tdY) is specified as inline style. I specified !important, but nothing changes.
What is wrong with my code ?
If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
Better style the TDs of the hovered TR using
.multidata tbody>tr:hover td{
background-color:#96c7ef
}
If you mean that the background color of the rows on hover should also be applied to those cells which do already have a background color (i.e. override this), you can extend the selector for the hover rule to also apply to the cells:
.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Actually it's even sufficient to simply use the second line (i.e. the one including the cells) in the selector, since this will apply to all cells of that row:
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Here in your full code:
.multidata td,
.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
.tdX {
background-color: red;
font-weight: bold;
}
.tdY {
background-color: green;
font-weight: bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
you have forgotten to put <tr> inside <tbody>
something like this
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</tbody>
</table>
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tr:hover td {
background-color:#96c7ef;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr class="change_on_hover">
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr class="change_on_hover">
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr class="change_on_hover">
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
I've been working on a project for a few days now, and I keep coming across this problem. I have a table with data in it, and I want the padding to be 30px on each side, and the '.task-link' or 'header-6' to expand with the window. Instead the width of the div goes across the entire screen, and it doesn't look even, and it is killing me. Sorry, new to HTML, so cut me some slack please, I'm sure it's obvious, I've tried lots of different things to no success, and I don't see why it should be covering the whole screen. Anyway, here is my code:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
Here is an example of what is happening now, and what I want it to look like.
now: https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
what I want: https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
The table goes all the way, side to side,with a padding of 30px on each side, as well as the Header 6 expands to match the extend of the screen, and when it gets smaller, I want only the Header 6 to get smaller.
You can use bootstrap responsive table. Here the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px) and when viewing on anything larger than 768px wide, then it will display the table by using the full width of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>longtextlongtextlongtext</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
remove col-sm-8 and checkout bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/
A bootstrap grid always has to go within a row, Also a grid persists of 12 columns.
for example:
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
This will give 3 identical columns with the same width
Snippet:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
As you can see, This makes a whitespace spot on both sides of your screen.
Also https://getbootstrap.com/docs/4.0/layout/grid/ gives a lot of information, check it out for sure.
I am trying to create normal html table, row with two column and column with six row.
I want to create html table according to above pic.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
<tr align="center" >
<th style="padding:2.5px; width: 10%;" rowspan="2">S No</th>
<th style="padding:2.5px; width: 55%;" rowspan="2">Subject</th>
<th style="padding:2.5px;" colspan="2">Term-1</th>
<th style="padding:2.5px;" colspan="2">Term-2</th>
</tr>
<tr>
<th>PA1</th>
<th>Notebook</th>
<th>PA2</th>
<th>Notebook2</th>
</tr>
</table>
</body>
</html>
I am making a newsletter with foundation. I need to get my background to go to full width, but at the moment the full width is defined in center:
My Example
How can I make the background color go full width? Foundation has made a prewritten CSS, where the width should be defined:
.wrapper {
width: 100%; }
#outlook a {
padding: 0; }
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
.bgcolor {
background-color: #fff;
}
.bgcolor--blue {
background-color: #ccd8db;
}
.bgcolor--content--light {
background-color: #ebe4cf;
}
.bgcolor--footer {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container" align="center">
<tbody>
<tr>
<td>
<!-- Row 1 -->
<table class="row collapse" border="1px solid red">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<center>
<img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<center>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Table have padding and cellspacing by default. You'll need to manually remove these in order for your content to take up the full width and height of the element.
You'll need to do this on every table tag.
<table cellpadding="0" cellspacing="0">
https://jsfiddle.net/wb9qg34e/
With regards to the table not being responsive. You have set static widths to the table and there is a class pulling through that has a min width on
td.large-12 center, th.large-12 center {
min-width: 532px;
}
If you remove the width from the table.container and add a new class like below, it should be fully responsive.
td.large-12 center, th.large-12 center {
min-width: auto;
}