Please refer the table structure needed in the pic above. Can any body guide how this can be achieved
Like this?
.tg {
border-collapse: collapse;
border-spacing: 0;
vertical-align: middle;
}
.tg td {
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg th {
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg .tg-7uzy {
background: #cfc;
}
.tg .tg-yw4l {
background: #ccf;
}
<table class="tg">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-yw4l">Col 1</th>
<th class="tg-yw4l">Col 2</th>
<th class="tg-yw4l">Col 3</th>
<th class="tg-yw4l">Col 4</th>
</tr>
<tr>
<td class="tg-7uzy" rowspan="3">Row 1</td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l" rowspan="3">Row 2</td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy">Row 3</td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l">Row 4</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
Related
I'm creating a editable html table, and I would like to know how can I give more than one value to a single cell with a static word in the middle, example:
I have this already:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr>
<th>Days</th>
<th>Work Schedule</th>
<th>Rest and Meal Interval</th>
</tr>
<tr>
<td>Monday</td>
<td contenteditable='true'>This is editable</td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Tuesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Wednesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Thursday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Friday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Saturday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Sunday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</table>
And I would like to have this:
So the word às will always be in the middle of those cells, and I need a space before and after it to write some values.
If you want something in the same column, you'll need to change the td to contain two inputs and the text between, something like this:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
border: 1px solid #dddddd;
text-align: left;
box-sizing: border-box;
width: 40%;
height: 100%
}
span {
width: 10%;
margin-left: 5%;
margin-right: 5%;
}
<table>
<tr>
<th>Days</th>
<th>Work Schedule</th>
<th>Rest and Meal Interval</th>
</tr>
<tr>
<td>Monday</td>
<td><input type="text"/><span>às</span><input type="text"/></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Tuesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Wednesday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Thursday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Friday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Saturday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td>Sunday</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</table>
Obviously some additional CSS will be needed to make it look pretty.
I'm trying to create a HTML table like in this image;
I tried the following but it did not work.
<table border="1">
<tr>
<th rowspan="2" colspan="2">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
You can try this:
table {
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid;
}
<table>
<col width=100><col width=100><col width=100>
<tr>
<td colspan="2" style="border-bottom: none;">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="2" style="border-top: none;"></td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
hi your code is good just add with to see the difference
<table border="1">
<tr>
<th rowspan="2" colspan="2" style="width: 95px;">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td style="width: 20px;">1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
This is how you could build the table in your picture by using rowspan and colspan:
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
width: 33%;
}
<table>
<tr>
<td colspan="2" rowspan="2">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
I am working on a pay slip design which should be implemented using table structure. I tried a lot but I am still very confused about rowspan and colspan. I also attached the html code below and I need to achieve the entire design in the attached png
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th colspan="2"> Employee Details</th>
<th colspan="2">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
<!--<th>ABC</th>-->
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="4">Item1</td>
</tr>
<tr>
<td>Name1</td>
<td>Price1</td>
</tr>
<tr>
<td>Name2</td>
<td>Price2</td>
</tr>
<tr>
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Item2</td>
<td>Item2</td>
<td colspan="2">Item2</td>
<td>Item2</td>
</tr>
</tbody>
</table>
table {
font: 12px 'Arial';
margin: 10px auto;
background: #fff;
text-align: left;
border: 1px solid #000;
border-collapse: collapse;
}
table * { border: 1px solid #000; padding: 5px; white-space: nowrap; }
caption {
background: #fff;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
tr { background: #fafafb; }
th { color: #fff; background: #0080bf; }
.field { font-weight: bold; }
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<caption>MS. KUSUM KISHORI</caption>
<thead>
<tr>
<th colspan="4">Employee Details</th>
<th colspan="7">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Emp No.</td>
<td colspan="3">929753</td>
<td class="field">Bank Name</td>
<td colspan="6">AXIS Bank</td>
<td class="field">Location</td>
<td>Item1</td>
</tr>
<tr>
<td class="field">Grade</td>
<td>C1</td>
<td class="field">UAN</td>
<td>10110101013999</td>
<td class="field">Acc No.</td>
<td colspan="6">10110101013999</td>
<td class="field">Base Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td class="field">PAN</td>
<td colspan="3">DROPK7729E</td>
<td class="field">Days paid</td>
<td colspan="6">31</td>
<td class="field">Depute Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td colspan="4"></td>
<td class="field">Leave Balance</td>
<td class="field">EL</td>
<td>36.32</td>
<td class="field">SL</td>
<td>24.32</td>
<td class="field">CL</td>
<td>2.50</td>
<td class="field">WON/SWON</td>
<td>2874529</td>
</tr>
</tbody>
</table>
<table id="woSpTable2" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th>Earnings</th>
<th>Arrears</th>
<th>Current</th>
<th>Deductions</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Total Earnings (Current + Arrears)</td>
<td>34,710.00</td>
<td>Total Deductions</td>
<td>2,817.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I'm trying to use both padding and border-bottom in html to get this table:
But in order to make the border-bottom one line I added border-collapse: collapse; and now I don't have padding, how can I use both?
here is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>
and my css code:
table {
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin:
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}
tr.line { border-bottom: 2px solid black; }
You have errors in your HTML and your CSS. After correcting those, all that's needed is to set border-spacing: 0 instead of border-collapse: collapse. Then it seems to work well.
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
border-collapse: separate;
border-spacing:0;
padding: 20px;
}
th, td {
text-align: left;
padding: 0 10px;
}
th.center, td.center {
text-align: center;
}
tbody tr:last-child td {
border-bottom: 2px solid black;
}
<table>
<thead>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
</tbody>
<tfoot>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</table>
Note that I also took the liberty of dividing the table in a thead, a tbody and a tfoot. With such a structure, you won't need tricks like class="line" to indicate the tr that needs the line; this can now be determined automatically (it's the last tr in the tbody).
HTML tables have a different display property than divs and they behave differently.
table {
border-collapse: collapse;
}
tbody {
border-bottom: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table style="width:50%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>total</th>
<td></td>
<td>282</td>
</tr>
</tfoot>
</table>
Also on jsfiddle: https://jsfiddle.net/c6mwh2cL/
Also check out this answer: tbody border not showing
Also, avoid putting <div> inside a table. A table should only have <thead>, <tbody> and <tfoot> elements, and those should only have <tr> elements, and those should only have <th> and <td>. The semantic has it's purpose and this is how it's meant to be rendered.
Does this help?
Using table border-spacing: 0;
tr.line td {
border-top: 2px solid black;
}
works
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
padding: 20px 20px 20px 20px;
border-spacing: 0;
}
th {
text-align: left;
padding: 0 10px;
}
td, th { }
.center {
text-align: center;
}
td {
padding: 0 10px;
}
tr.line td {
border-top: 2px solid black;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr class="line">
<td></td>
<td></td>
<td>Sum C</td>
<td>Sum D</td>
</tr>
</tbody>
</table>
I need a table like in the picture . I've tried it but I can't do exactly what I want. Here is the code I've wrotten:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l" rowspan="2"></th>
<th class="tg-yw4l"></th>
<th class="tg-yw4l"></th>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
You would need to use a nested table to achieve your layout - if you insist on using tables
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
.tg {
height: 400px;
}
.tg table {
height: 100%;
}
<table class="tg">
<tr>
<th class="tg-yw4l no-pad" rowspan="3">
<table>
<tr>
<td>td</td>
</tr>
<tr>
<td>td</td>
</tr>
</table>
</th>
<th class="tg-yw4l">th</th>
<th class="tg-yw4l">th</th>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
</table>