DataTables Padding Top 0 How To Set - html

I have 3 DataTables tables. Their ID's are #example2,#example2,#example3.
I have a problem with padding top 0, i want to set padding top 0 but after trying many hours i am exhausted.
MARKUP:
<table>
<tr>
<td width="850px">
<div></div>
<div>
<table id="example2" class="display" cellspacing="0">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<td></td>
<td></td>
<td>
<table>{
<tr>
<td></td>
</tr>}</table>
</td>
</tr>}</tbody>
</table>
</div>
</td>
<td class="padding" width="850px">
<div></div>
<div>
<table id="example3" class="display" cellpadding="0px">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td width="850px">
<div></div>
<div>
<table id="example4" class="display" cellspacing="0">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<table>
<tr>
<td </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
CSS:
<style> td.padding {
padding-top: 0cm;
}
</style> <style> table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border-top: 1px solid #D7E4DB;
border-bottom: 1px solid #D7E4DB;
}
</style> <style> #example.dataTable {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
text-align: center;
}
</style> <style> #example_filter.dataTables_filter {
width: 100%;
/*float: left;*/
text-align: center;
}
.DTTT_container {
width: 100%;
/*float: left;*/
text-align: center;
}
#example.dataTable {
margin-top: 0px !important;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.dataTable {
margin-top: 0px !important;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#example.display.dataTable {
margin-top: 0px !important;
text-align: center;
margin-left: auto;
margin-right: auto;
}
table.dataTable {
width: 100%;
}
</style>

Related

Table Row is not filling the full width of the table

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>

How to make the last row of a table frozen?

I'm able to make the first row of an HTML table frozen similar to Freeze Panes in MS Word, but not sure how to do it for the last row in the table.
I have this code:
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
.table-header-col {
position: sticky;
top: 0px;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>
I only included two rows here for an example, but if I have 50 rows, the user will have to scroll to get to the last row which contains a total. Is it possible to make that row Freeze similar to the way I'm making the header row freeze above?

are you want something like this :)
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
table tbody tr:last-child{
position: sticky;
top: 0;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>

you can try this one.
worked for me:
table{
width: 400px;
position: relative;
background: transparent;
display: block;
padding-bottom: 42px;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table ::-webkit-scrollbar {
width: 0px;
}
table > thead {
height: 30px;
text-align: end;
position: sticky;
top: 0;
display: table;
width: 100%;
background: green;
}
table > thead > tr{
height: 30px;
background-color: #009879;
color: #ffffff;
text-align: left;
}
table > thead > tr > th{
text-align: end;
}
table > tbody{
height: 200px;
display: block;
width: 100%;
overflow: auto;
background: pink;
}
table > tbody > tr{
height: 30px;
text-align: end;
display: table;
width: 100%;
}
table > thead > tr > th,
table > tbody > tr > td{
padding: 12px 15px;
}
table > tbody > tr{
border-bottom: 1px solid #dddddd;
}
table > tbody > tr:nth-of-type(even) {
background-color: #f3f3f3;
}
table > tbody > tr:last-of-type {
border-bottom: 2px solid #009879;
}
table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
<tr>
<td>text2.1</td>
<td>text2.2</td>
<td>text2.3</td>
</tr>
<tr>
<td>text3.1</td>
<td>text3.2</td>
<td>text3.3</td>
</tr>
<tr>
<td>text4.1</td>
<td>text4.2</td>
<td>text4.3</td>
</tr>
<tr>
<td>text5.1</td>
<td>text5.2</td>
<td>text5.3</td>
</tr>
<tr>
<td>text6.1</td>
<td>text6.2</td>
<td>text6.3</td>
</tr>
<tr>
<td>text7.1</td>
<td>text7.2</td>
<td>text7.3</td>
</tr>
<tr>
<td>text8.1</td>
<td>text8.2</td>
<td>text8.3</td>
</tr>
<tr>
<td>text9 .1</td>
<td>text9 .2</td>
<td>text9 .3</td>
</tr>
</tbody>
</table>

How to freeze table columns

How to make the horizontal scroll bar only affects the gray columns in the following illustration.
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
#table {
background: white;
margin: 100px auto;
width: 400px;
overflow: auto;
text-align: center;
}
#inner-table {
border-collapse: collapse;
border-radius: 3px;
overflow: hidden
}
td,
th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.sticky {
background-color: #1C3D5A;
color: #dae1e7;
}
.scroll {
background-color: #B8C2CC;
color: #22292f
}
<div id="table">
<table id="inner-table">
<thead>
<tr>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">1</td>
<td class="sticky">2</td>
<td class="scroll">3</td>
<td class="scroll">4</td>
<td class="scroll">5</td>
<td class="scroll">6</td>
<td class="scroll">7</td>
<td class="scroll">8</td>
<td class="sticky">9</td>
<td class="sticky">10</td>
</tr>
<tr>
<td class="sticky">11</td>
<td class="sticky">12</td>
<td class="scroll">13</td>
<td class="scroll">14</td>
<td class="scroll">15</td>
<td class="scroll">16</td>
<td class="scroll">17</td>
<td class="scroll">18</td>
<td class="sticky">19</td>
<td class="sticky">20</td>
</tr>
</tbody>
</table>
</div>

This was rather more difficult to put together than I anticipated - and even now, I am wondering if there isn't a much simpler approach.
The approach below utilises:
an outer container which contains two position: absolute tables
a fixed-width inner container - using margins for positioning inside the outer container - with a scrollbar, which allows you to see the oversized table it contains
Working Example:
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
.outer-container {
position: relative;
background-color: white;
margin: 40px auto;
width: 400px;
overflow: hidden;
text-align: center;
}
.outer-container,
.inner-container {
height: 125px;
}
table {
height: 108px;
}
.inner-container table {
border-radius: 3px;
}
td, th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.fixed-table th,
.fixed-table td {
background-color: #1C3D5A;
color: #dae1e7;
}
.inner-container {
margin: 0 130px;
max-width: 612px;
overflow: auto;
}
.inner-container > table {
background-color: #B8C2CC;
color: #22292f
}
.outer-container > table {
position: absolute;
top: 0;
border-collapse: collapse;
}
.outer-container > table:nth-of-type(1) {
left: 0;
}
.outer-container > table:nth-of-type(2) {
right: 0;
}
<div class="outer-container">
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<div class="inner-container">
<table>
<thead>
<tr>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>

CSS3 should do the job.
table {
position: relative;
padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
position: absolute;
left: 0;
}
Sources

How to add space between two rows with border in bootstrap table

table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}
tbody tr{border:2px solid #256ac4;}
td{ color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
i have coded this, expected result is in image but i am unable to add space between two rows, if i use border-collapse:seperate then space is coming but border is not applying.
https://ibb.co/b9WDn5

In the parent table, try setting
border-collapse:separate;
border-spacing:5em;
Try to refer this .

You should add a div where your content goes and style it to create the gap between rows.
So if we take the code from you example it will turn out like this.
HTML
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
padding: 0;
}
td div {
margin-bottom: 10px;
border: 2px solid #256ac4;
}
td:first-child div {
border-left-width: 2px;
}
td:last-child div {
border-right-width: 2px;
}
thead {
border: solid 1px #000;
}
th {
text-align: left
}
https://jsfiddle.net/nvbza1u3/1/
Note how the border was added to the div and not the tr. Also I added the border to thead to make it look more like your example

I have fix this issue with float:left , check with this snippet
* { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border: solid 1px #000;
border-collapse: collapse;
float:left;
}
thead {
float: left;
}
tbody tr {
border: 2px solid #256ac4;
float: left;
margin-bottom: 15px;
width: 100%;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
}
th {
text-align: left
}
<body>
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>

Scrollable table contents html/css

I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;
https://jsfiddle.net/f5ax5w2r/
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td>
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

The number of table cells do not match in each table row in your code. Adding the correct colspan value should do it.
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Try adding colspan="2" to the td which has table inside.
https://jsfiddle.net/f5ax5w2r/
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>