line inside html table - html

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>

Related

How can I give more than one value to a single cell with a static word in the middle

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.

how to set two cells in one cell of table?

I get confused when I want set two cells (x, y) in one cell CoordLamberts?
.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th>CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>x</th>
<th>y</th>
<th></th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>
What I expect:
What I get:

.techniques {
width: 70%;
border: 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse: collapse;
border: 1px solid;
}
<table class="techniques">
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td>City</td>
<td>BV</td>
<td>region</td>
<td>3</td>
<td>443</td>
<td>634</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>7</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
<tr>
<td colspan="4">superficie(ha)</td>
<td>786</td>
<td>564</td>
<td>35</td>
</tr>
</table>

This should work what you were missing was that you needed colspan instead of rowspan CoordLamberts should use 2 columns,
.techniques{
width: 70%;
border: 1px solid;
}
.techniques,.techniques th, .techniques td{
border-collapse: collapse;
border: 1px solid;
}
<!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.0">
<title>Document</title>
</head>
<body>
<table class="techniques">
<tr>
<th rowspan="2">Foret </th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<td>x</td>
<td>y</td>
</tr>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td>
<td>395 055</td>
<td>391 386</td>
<td>13</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td>7</td>
<td>398 981</td>
<td>398 981</td>
<td>12</td>
</tr>
<tr>
<td colspan="6">Superficie</td>
<td>102</td>
</tr>
</table>
</body>

this way.
HTLM table use <thead>, <tbody> and <tfoot> ( + <caption> )
.techniques {
width : 70%;
border : 1px solid;
}
.techniques,
.techniques th,
.techniques td {
border-collapse : collapse;
border : 1px solid;
}
.techniques td {
vertical-align : text-top;
text-align : center;
}
.techniques thead {
background-color: lightgrey;
}
.techniques thead th[rowspan="2"]:nth-child(-n+4) {
min-width: 6em;
}
.techniques thead th[colspan="2"] {
min-width: 10em;
}
.techniques thead th[rowspan="2"]:last-of-type {
min-width: 10em;
}
.techniques tfoot {
background-color: whitesmoke;
}
<table class="techniques">
<thead>
<tr>
<th rowspan="2">Foret</th>
<th rowspan="2">Canton</th>
<th rowspan="2">Secteur</th>
<th rowspan="2">Parcelles</th>
<th colspan="2">CoordLamberts</th>
<th rowspan="2">Superficie(ha)</th>
</tr>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">City</td>
<td rowspan="4">BV</td>
<td rowspan="4">region</td>
<td>3</td><td>443</td><td>634</td><td>13</td>
</tr>
<tr>
<td>7</td><td>443</td><td>634</td><td>26</td>
</tr>
<tr>
<td>8</td><td>443</td><td>634</td><td>54</td>
</tr>
<tr>
<td>13</td><td>443</td><td>634</td><td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">superficie(ha)</td>
<td colspan="2"></td>
<td>102</td>
</tr>
</tfoot>
</table>

Need table design with rowspan and colspan

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>

HTML Tables equal column height

Hi im a beginner in css i have these table below its 3 separate table and i would like to make all of the table column height equal is there any easy method to go about this? Any suggestion would be greatly appreciated thank you!
Here is my JSFiddle
<body>
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class" >
<thead>
<th>Fruits</th>
</thead>
<tbody >
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

it's possible when a table change by CSS, but it's not good,
You can try this code here https://jsfiddle.net/10t4gv92/21/ Or
.fontcolor {
color: #25BAD0;
}
.center {
display: flex;
justify-content: center
}
.class {
font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
border-collapse: collapse;
}
table {
display: block;
width: 25%;
border:1px solid #25BAD0;
}
table tr,
table th,
table tr td,
table tbody,
table thead {
display:block;
width: 100%;
}
th {
width:100%;
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #25BAD0;
}
td {
width: 100%;
padding-top: 5px;
padding-left: 8px;
}
.fruitsTable th { width:100%; }
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable3 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>

Need a table structure in html of table within table

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>