Table Cells with different widths in different rows - html

I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.


You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}


Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...


For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}

Related

Force an element to take exactly half of available height in print media

I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>

Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO

Filling an automatic-width table cell with a fixed-layout table

This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.
My current code (very verbose with everything in line) looks like this:
td { border: 1px solid black }
<table style="table-layout:fixed">
<tr>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%;text-align:center">Some text here</td>
<td style="width:25%;text-align:center">More text</td>
<td style="width:25%;text-align:center">Hi</td>
<td style="width:25%;text-align:center">Somewhat longer text</td>
</tr>
</table>
What I'm trying to accomplish should look like this:
That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.
The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.
Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.
I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.
I'm very opposed to using JavaScript to solve this, for the record!
Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.

<table style="table-layout:fixed" border="1">
<tr style="font-size: 1px;">
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
</tr>
<tr style="font-size: 6px;">
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Some text here</td>
<td colspan="3" style="text-align:center">More text</td>
<td colspan="3" style="text-align:center">Hi</td>
<td colspan="3" style="text-align:center">Somewhat longer text</td>
</tr>
</table>
this might solve your answer, your previous code html elements are not properly closed look on that also.

Mailchimp applies the table's border in the whole template design

Mailchimp is so frustrating. I'm trying to make a campaign with the template that I did. It's supposed to look like this:
BUT when I'm trying to paste a table that I copied from google sheets, it's looking like this
How do I fix it? How can I make the borders disappear every time I'm going to paste a table?
If you're wondering this is the source code (I removed the content because it's classified and it exceeded the 30,000 characters limit):
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<table border="1" cellpadding="0" cellspacing="0" dir="ltr">
<colgroup>
<col width="277" />
<col width="100" />
<col width="100" />
<col width="113" />
<col width="114" />
<col width="49" />
<col width="79" />
<col width="2" />
<col width="100" />
<col width="100" />
</colgroup>
<tbody>
<tr>
<td data-sheets-value="{"1":2,"2":"AS OF: 8/29/16"}">AS OF: 8/29/16</td>
<td colspan="6" data-sheets-value="{"1":2,"2":"DIGITAL CARDS / CODES\n Official Pins or Scans with Text"}" rowspan="1">DIGITAL CARDS / CODES<br />
Official Pins or Scans with Text</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"PHYSICAL CARDS\n Free shipping on 500+ units"}" rowspan="1">PHYSICAL CARDS<br />
Free shipping on 500+ units</td>
</tr>
<tr>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"< 100 Units"}" rowspan="1">< 100 Units</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"100+ Units\n Call/Email for pricing on 1000+ units per item"}" rowspan="1">100+ Units<br />
Call/Email for pricing on 1000+ units per item</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Format"}" rowspan="1">Format</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Call/Email for pricing\n on 1000+ units per item"}" rowspan="1">Call/Email for pricing<br />
on 1000+ units per item</td>
</tr>
<tr>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Pins"}"> </td>
<td data-sheets-value="{"1":2,"2":"Scans + Text"}"> </td>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]" data-sheets-value="{"1":3,"3":10}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.15}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.085}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
<td data-sheets-value="{"1":2,"2":"\u25cf"}"> </td>
<td> </td>
<td> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

table border applied change border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">

Step 1: set each <table> to border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 2: delete the commented-out td {border: 1px solid #ccc;}
You should now have no borders anywhere, so go back and add only the borders you want with inline styles on either <td>s (best) or <table>s. Eg:
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td style="border-top: 1px solid #ffffff;">
content
</td>
</tr>
</table>
This should produce an email with no unintentional borders anywhere. I'm not sure what pasting from Google Sheets is like, but you'll want to edit the HTML in this way to make sure it displays correctly.

Uneven column width

I'm trying to copy this table format.
but I can't seem to make
uneven column width for each td and it break the form of my table as well
here is my code:
<div class="CenterThings">
<table class="CenterThings">
<tr>
<th colspan="3" style="background-color:black;color:white;">Job Quotation</th>
</tr>
<tr>
<td style="width: 328px">Address:<asp:TextBox ID="TextBox2" runat="server" Height="16px" Width="255px"></asp:TextBox>
</td>
<td style="width: 219px">Contact#:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 328px">
Job Description:
<asp:TextBox ID="TextBox3" runat="server" Width="194px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 328px">
Printing Process:
<asp:TextBox ID="TextBox4" runat="server" Height="16px" Width="195px"></asp:TextBox>
</td>
</tr>
<tr>
<th colspan="3" style="background-color:black;color:white;">Specification</th>
</tr>
<tr>
<td style="width: 328px">
Quantity:
</td>
<td style="width: 219px">
Size:
</td>
<td>
No.of pages inside:
</td>
</tr>
<tr>
<td style="width: 328px">
Material:
</td>
<td style="width: 219px">
Cover:
</td>
<td>
Inside:
</td>
</tr>
</table>
</div>
and this is its output :
I needed to somehow replicate the first picture or somehow close.

You could use nested tables, placing a whole table inside a TD. This would allow the extra complexity in your layout.
<table id='main_table'>
<tr>
<td>
<table id='inner_table'>
</table>
</td>
</tr>
</table>

Cals table styling

I have the below HTML table (cals table), here I need some CSS which shows the output as in the screenshot (the borders part).
<div class="para">To the Commissioner for Labour</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4">
<colgroup>
<col class="colname-c1 colwidth-25.00%"></col>
<col class="colname-c2 colwidth-25.00%"></col>
<col class="colname-c3 colwidth-25.00%"></col>
<col class="colname-c4 colwidth-25.00%"></col>
</colgroup>
<tbody>
<tr>
<td colspan="4" align="">
I declare that the information given in this form is, to the
best of my knowledge, true and accurate.Signature: ___________
(for and on behalf of the employer)Name (in block letters): ____
</td>
</tr>
<tr>
<td>
<div class="para">Position:</div>
</td>
<td>
<div class="para">□ Sole proprietor</div>
</td>
<td>
<div class="para">□ Partner</div>
</td>
<td>
<div class="para"></div>
</td>
</tr>
<tr>
<td>
<div class="para"></div>
</td>
<td>
<div class="para">□ Manager</div>
</td>
<td>
<div class="para">□ Officer</div>
</td>
<td>
<div class="para"></div>
</td>
</tr>
<tr>
<td colspan="2" align="">Date: __________________________</td>
<td>
<div class="para"></div>
</td>
<td>
<div class="para">__________________________________</div>
<div class="para">Chop of Company <span class="font-style-bolditalic">(Note 1)</span>
</div>
</td>
</tr>
</tbody>
</table>
<div class="para align-center"><span class="font-style-bold">Part I</span></div>
<div class="para"> <span class="font-style-italic">A. Particulars of the employee</span>
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4">
<colgroup>
<col class="colname-c1 colwidth-25.00%"></col>
<col class="colname-c2 colwidth-25.00%"></col>
<col class="colname-c3 colwidth-25.00%"></col>
<col class="colname-c4 colwidth-25.00%"></col>
</colgroup>
<tbody>
<tr>
<td colspan="3" align="">Name of employee (Surname first)</td>
<td>
<div class="para">Identity Card/Passport No.</div>
</td>
</tr>
<tr>
<td>
<div class="para">Telephone No.</div>
</td>
<td>
<div class="para">Fax No.</div>
</td>
<td colspan="2" align="">Address</td>
</tr>
<tr>
<td>
<div class="para">Date of birth</div>
<div class="para">_____/_____/____</div>
<div class="para">Day/Month/Year</div>
</td>
<td>
<div class="para">Sex</div>
<div class="para">□ Male □ Female</div>
</td>
<td>
<div class="para">Occupation</div>
</td>
<td>
<div class="para">An apprentice</div>
<div class="para">□ Yes □ No</div>
</td>
</tr>
</tbody>
</table>
the expected and current outputs are as below
Current:
Expected:
Thanks

To display borders around the table:
table {
border: 1px solid;
}
To prevent borders around the cells (td):
table td {
border: none;
}
To align the text to the left and to add some spacing:
table td {
padding: 3px;
text-align: left;
}
You can style the second table based on the example I have provided for the first.
Example: http://jsfiddle.net/KTZL6/1
This, however, is very basic css. You're probably best off working through a tutorial like http://www.cssbasics.com/introduction-to-css/ to get a grasp of it.

If i understand right you only want remove borders.
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="4" border="0">
You can use border="0", No need and external css file
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none for other border properties