All I want, is for .TableH to be centered horizontally. I'm usually pretty decent at working small things like this out, but this is driving me nuts. I don't use tables as much as I should so if someone could help me, that would be great.
HTML:
<div id="Contactbody">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6118.82203107468!2d-74.17584896118852!3d39.932195088535714!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8c86de105986c5c3!2sEaglespeed+Oil+%26+Lube!5e0!3m2!1sen!2sus!4v1395432683622" frameborder="0" style="border:0"></iframe>
<table>
<tbody>
<tr>
<td class="TableH">Hours</td>
</tr>
<tr>
<td class="Day">Mon</td>
<td class="Hours">8 - 6</td>
</tr>
<tr>
<td class="Day">Tues</td>
<td class="Hours">8 - 6</td>
</tr>
<tr>
<td class="Day">Wed</td>
<td class="Hours">8 - 7</td>
</tr>
<tr>
<td class="Day">Thur</td>
<td class="Hours">8 - 6</td>
</tr>
<tr>
<td class="Day">Fri</td>
<td class="Hours">8 - 6</td>
</tr>
<tr>
<td class="Day">Sat</td>
<td class="Hours">7:30 - 3:30</td>
</tr>
<tr>
<td class="Day">Sun</td>
<td class="Hours">8:30 - 1</td>
</tr>
</tbody>
</table>
</div>
CSS:
#Contactbody {
position: absolute;
display: none;
margin: 8% 0 0 15%;
width: 70%;
height: auto;
border-left: 4px solid #ffe168;
}
#Contactbody iframe {
display: block;
float: left;
margin-left: 2.5%;
width: 40%;
height: auto;
}
#Contactbody table {
float: right;
margin-right: 5%;
width: 25%;
font-family: Aleygra Sans SC, Maven Pro, Verdana, Arial;
}
.TableH {
color: #0b0658;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
Your cell is only spanning one column, you probably want:
<td class="TableH" colspan="2">Hours</td>
Related
This is my code, I want to reduce the width of all the rows in table (except for first table) when the size of screen is more than 1000px. I tried this but this media query is not seem to be working. And also I want the bottom border of the table to be rounded, with the code I tried except for the left-most all the border-bottom radius is getting rounded
Can anyone tell what I am missing?
I have read many answers none of them seem to be working
#media screen and (min-width: 1000px) {
.table-container {
float: left;
width: 15%;
}
.table-container:first-of-type {
width: 40%;
}
}
.table_container {
float: left;
width: 25%;
}
.container::after {
content: "";
clear: both;
display: table;
}
table {
margin: 0 auto;
border-radius: 10px;
}
tr {
padding: 15px;
text-align: center;
}
td {
color: black;
text-align: center;
vertical-align: middle;
border: 1px double white;
height: 50px;
background-color: grey;
width: 272px;
}
.sub_text {
font-size: 12px;
font-style: italic;
color: #0071ce;
font-weight: 100;
}
th {
background-color: black;
text-align: center;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-weight: bold;
height: 70px;
}
.header {
color: #0071ce;
font-weight: bold;
padding: 10px;
}
.wrapper {
text-align: center;
margin-top: 20px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 10px
<div class="table_container">
<table>
<thead>
<tr>
<th colspan="2">Cost</th>
</tr>
<tr>
</thead>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td> emp Only</td>
<tr>
<td> emp + Spouse/partner</td>
</tr>
<tr>
<td> emp + child(ren)</td>
</tr>
<tr>
<td> emp + family</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2"> Org’s annual max contribution<br>
<span class="sub_text">
</span>
</td>
<td> emp Only</td>
<tr>
<td> emp + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td> emp Only</td>
<tr>
<td> emp + dependent(s)</td>
</tr>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<tr>
<th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<tr>
<th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<tr>
<th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>H</td>
</tr>
</table>
</div>
#media screen and (min-width: 800px) {
.table-container {
float: left;
width: 15%;
}
}
You were using .table-container, not .table_container from above. Just tried this and it works as expected. Also make sure to add it to the bottom of the stylesheet.
#media screen and (min-width: 1000px) {
.table_container {
float: left;
width: 15%;
}
.table_container:first-of-type() {
width: 40%;
}
}
For the bottom-border-radius, if you're trying to avoid using classes this is a solution that works if your table is staying the same size. If you add columns you would have to adjust tr:nth-of-type(7) to the appropriate number.
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px
}
.table_container:nth-of-type(1) tr:last-child td:first-child {
border-bottom-left-radius: 0;
}
.table_container:nth-of-type(1) tr:nth-of-type(7) td:first-child {
border-bottom-left-radius: 10px;
}
I have a problem that it seems i can find a solution for, I have a simple html table with some css, that looks like:
.module-table {
line-height: 1.2em;
border: solid thin;
border-collapse: collapse;
font-size: 11.5px;
display: table;
}
.module-table th {
vertical-align: middle;
text-align: center;
border: solid thin;
width: 100px;
}
.module-table td {
border: solid thin;
}
.module-table-extended-rack-info {
transform: rotate(-90deg);
}
.module-table-cell {
border: solid thin;
vertical-align: middle;
text-align: center;
}
.module-table-rack-info.module-table-cell {
vertical-align: top;
}
<table class="module-table module-table-cell">
<thead>
<tr>
<th rowspan="2">
<div>
ID: 0
</div>
</th>
<th colspan="3">Modules</th>
</tr>
<tr>
<th style="width: 10px">No.</th>
<th>Type</th>
<th>Communication</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="8">
<div class="module-table-rack-info">
Row: 0<br>
Interval: 12<br>
Errors: 0
</div>
<div class="module-table-extended-rack-info">
Type: Unknown Type
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>3</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>5</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>7</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>9</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>13</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
<tr>
<td>15</td>
<td>Ok</td>
<td>
4
0
</td>
</tr>
</tbody>
</table>
Now I think my problem is visible at first glance, in first column there is a text I rotate by 90 degrees, and there is a normal text, and those divs are colliding. Now what I am trying to do is make normal text above transformed one so it will make one nice column. From what I have done I see problem lies somewhere in .module-table-cell class I tried to override it with other class but no luck. Is there any way to make it like this?
Two ways to do that.
1: transform its origin
.module-table-extended-rack-info {
transform: rotate(-90deg);
transform-origin: 40px -4px;
}
2: Using Positions
.module-table td {
border: solid thin;
position: relative;
}
.module-table-extended-rack-info {
transform: rotate(-90deg);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
display: flex;
align-items: center;
}
I'm creating a HTML form and having an issue with getting the 2 column rows to fill the full width of the table. I have tried using colspace and setting a width to it but it's not working. I have also tried setting the width to 100% but it's also not working. CSS also doesn't seem to be making any changes to the
body {
width: 60%;
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
table-layout: fixed;
}
.heading {
text-align: center;
font-weight: bold;
padding: 5px;
text-decoration: underline;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 25px;
}
.table-heading {
text-align: center;
padding: 20px;
font-weight: bold;
font-size: 14px;
background-color: #8080802e;
}
.demographics {
text-align: left;
}
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding: 6px;
}
<img src="https://via.placeholder.com/150" />
<table>
<tbody>
<tr>
<td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
</tr>
<tr>
<td>Last Name:</td>
<td>First Name:</td>
<td>Middle Intial:</td>
</tr>
<tr>
<td colspan="2">Current Address:</td>
<td>City:</td>
</tr>
<tr>
<td>State:</td>
<td>Zip Code:</td>
<td>Phone #:</td>
</tr>
<tr>
<td colspan="2">Spouse's Name:</td>
<td>Phone #:</td>
</tr>
<tr>
<td class="table-heading" colspan="3">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
</tr>
<tr>
<td>1)</td>
<td>5)</td>
</tr>
<tr>
<td>2)</td>
<td>6)</td>
</tr>
<tr>
<td>3)</td>
<td>7)</td>
</tr>
<tr>
<td>4)</td>
<td>8)</td>
</tr>
</tbody>
</table>
Because you have rows with 1, 2, and 3 columns, you need to use colspan with a number that is divisible by all three numbers, in this case, 6.
For one column per row, you would use colspan="6" because 6/6 = 1
For two columns per row, colspan="3" because 6/3 = 2
For three columns per row, colspan="2" because 6/2=2
Here is the HTML for a table with 1, 2, and 3 columns:
<table>
<tr>
<td colspan="6">One Column</td>
</tr>
<tr>
<td colspan="3">Two Column</td>
<td colspan="3">Two Column</td>
</tr>
<tr>
<td colspan="2">Three Column</td>
<td colspan="2">Three Column</td>
<td colspan="2">Three Column</td>
</tr>
</table>
Use Two Separate Table.
body {
width: 60%;
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
table-layout: fixed;
}
.heading {
text-align: center;
font-weight: bold;
padding: 5px;
text-decoration: underline;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 25px;
}
.table-heading {
text-align: center;
padding: 20px;
font-weight: bold;
font-size: 14px;
background-color: #8080802e;
}
.demographics {
text-align: left;
}
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding: 6px;
}
.no-border-top{
border-top : 0
}
<img src="https://via.placeholder.com/150" />
<table>
<tbody>
<tr>
<td class="table-heading" colspan="3">APPLICANT'S INFORMATION</td>
</tr>
<tr>
<td>Last Name:</td>
<td>First Name:</td>
<td>Middle Intial:</td>
</tr>
<tr>
<td colspan="2">Current Address:</td>
<td>City:</td>
</tr>
<tr>
<td>State:</td>
<td>Zip Code:</td>
<td>Phone #:</td>
</tr>
<tr>
<td colspan="2">Spouse's Name:</td>
<td>Phone #:</td>
</tr>
</tbody>
</table>
<table class="no-border-top">
<tbody>
<tr>
<td class="table-heading no-border-top" colspan="2">CHILDREN'S INFORMATION (NO STEP CHILDREN)</td>
</tr>
<tr>
<td>1)</td>
<td>5)</td>
</tr>
<tr>
<td>2)</td>
<td>6)</td>
</tr>
<tr>
<td>3)</td>
<td>7)</td>
</tr>
<tr>
<td>4)</td>
<td>8)</td>
</tr>
</tbody>
</table>
I've created a basic HTML table yet I can't seem to get the top <th> element to span 100% width of it's parent <tr> element (and ultimately the <table> element).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
display: block;
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 0 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
..my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
So when you run that code snippet ^ what I want to see is 'helloWorld' centered above the 'Teachers, School, Status' row. I'm not sure why it only seems to be expanding a quarter of the table width - does it have to do with the table-layout: fixed style that I've set on the <table> element?
Link to JSFiddle
Two things:
1.) You need to add colspan="3" as an attribute to that thto make it span all three columns of that table.
2.) You should not use display: block for a table element, regardless if that's td, th, tr or whatever. The display setting of the th by default is table-cell- just leave that as it is, otherwise the table won't be a "real table" in the end (i.e. the cells loose their automatic way of aligning and adjusting themselves).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 0 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
..my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header" colspan="3">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
You can set your ".my-card-table" and ".table-top-heading" to {display:flex}, and your ".table-top-heading-header" to {width:100%; text-align: center}.
You also had an extra (.) on your (my-table-td ) class.
Here's a working solution ;)
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
display: flex;
}
.table-top-heading {
width: 100%;
display: flex;
}
.table-top-heading-header {
width: 100%;
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
.my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
I am working with HTML tables and need to achieve like attached image.
When I try to achieve this,I caught problem like this
① I couldn't figure out how not to display border line.
② Each cell size is not aligned compared to desired result.
I would like to achieve in a certain way. If you have any opinion, please let me know.
Thanks
table {
border-collapse:collapse;
table-layout: fixed;
text-align: center;
width: 10rem;
height: 10rem;}
td {
border:solid black 1px;
}
.noborder {
}
.noborder2{
}
<table>
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You can do something like this using empty-cells: hide;.
Note: but the border is bit off since it removes the td border where the content doesn't exists. If that's ok.
.tbl {
empty-cells: hide;
border: 1px solid #999;
}
td {
background: #fff;
border: 1px solid #999;
padding: 10px 15px;
cursor: pointer;
}
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
Here is the another version:
.MainDiv {
border: 1px solid #999;
display: inline-block;
}
table.tbl {
empty-cells: hide;
}
td.noborder {
background: #fff;
border: 1px solid #999;
width: 50px;
height: 50px;
text-align: center;
}
td.removeBorder {
width: 100px;
height: 50px;
}
td:empty {
visibility: hidden;
}
<div class="MainDiv">
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" class="removeBorder">Total (summary)</td>
</tr>
<tr>
<td class="noborder">A</td>
<td class="noborder">B</td>
<td class="noborder">C</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">1</td>
<td class="noborder">2</td>
<td class="noborder">3</td>
<td class="noborder">6</td>
</tr>
</tbody>
</table>
</div>