I want about 30 tables on a page in a grid like format but I am having trouble putting any spacing between all of them. This is what I have right now:
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
}
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
font-size: 30px;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
Here is the jsfiddle: https://jsfiddle.net/ohLa00m7/1/
Something similar to how to boxes are layed out here (http://www.awwwards.com/blog/) is what I am looking for.
Thanks for any help!
You can use margin and calc function in css :
table {
border-collapse: collapse;
border: 1px solid gray;
width: calc(50% - 10px);
float: left;
margin: 5px;
}
table {
border-collapse: collapse;
border: 1px solid gray;
width: calc(50% - 10px);
float: left;
margin: 5px;
}
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
font-size: 30px;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
Using <div> instead of tables would work better.
My version of this code:
HTML
<div class="shell">
<div class="prizestitle">Table</div>
<div class="prizesinfo td">Info</div>
<div class="prizesdesc td">Description</div>
</div>
CSS
.td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
font-size: 30px;
font-weight: 200;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
.shell {
border: 1px solid gray;
border-collapse: collapse;
width: calc(50% - 40px);
margin: 10px;
display: inline-block;
float: left;
}
Simply just adding a margin to the table will add spaces between tables
But I would tell you that it's impossible to achieve the result as you have shown by using tables to do so you should replace them with Divs and you may need to use some javascript libraries.
to add a margin:
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
margin:5px;
}
See if this CSS does what you want
table {
border-collapse: collapse;
border: 1px solid gray;
width: 30%;
float: left;
margin: 10px;
}
You can adjust the width percentage and margin to get different spacing and tables per line.
i know this is kinda stupid but you can just add empty paragraphs in between each table
<table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<p> </p>
<table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<p> </p>
<table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
You can try:
<table cellspacing="10">
but it doesn't work in HTML 5 as far as I know.
Or in the CSS insert something like this:
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
border-collapse: separate;
border-spacing: 10px;
}
Try
<table cellspacing="10">
You may play around making border wider and include this width into size of the table container like
table {
border: 10px solid gray;
width: 50%;
box-sizing: border-box;
float: left;
}
Related
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>
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>
I want two horizontal between both records and some extra bottom padding to add a symbol
Edit/update :
I am hard-coding what I want as below
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(7) {
background-color: red
}
td:nth-child(21) {
border-bottom: 1px solid blue;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
Still I need symbols to be added and I an better way to add border instead of this row <tr><td colspan="3"> -----------------------------</td></tr>
Can someone suggest me how to do that it properly?
Add border in tr and apply border-collapse:collapse for table.
table {
border: 1px solid black;
padding:0em 2em;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
td {
padding: 2em;
}
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>
Try the below code
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>
To insert an empty row, you can write:
<tr>
<td colspan="2"> </td>
</tr>
For extra padding, where you need - just add a class="extra-padding-bottom" attribute
And add appropriate CSS code:
.extra-bottom-padding {
padding-bottom: 100px;
}
For example <td class="extra-padding-bottom">
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(even) > th,
tr:nth-child(even) > td {
padding-bottom: 0.75em;
border-bottom: 1px dashed #222;
}
tr:nth-child(odd) > th,
tr:nth-child(odd) > td {
padding-top: 0.75em;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
HTML -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table {
border-collapse: collapse;
}
<tr>
<td><hr> </td>
<td><hr> </td>
</tr>
I tried this, it worked
I have a table of fixed width and height containing three rows and columns. Rows and columns are automatically equal size, but when I put innerHTML (or image) into table cell, cell with text inside expands at the cost of other columns. How to prevent table cells from expanding after inserting content inside? I've tried solutions from similar stack overflow questions, but nothing worked.
JS fiddle: https://jsfiddle.net/m20akmdx/14/
document.getElementById('8').innerHTML = 'R';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Try using fixed table layout.
table {
table-layout: fixed;
...
}
And adding a no-break space into each cell.
td:after {
content: "\00A0";
}
document.getElementById('8').innerHTML = 'R';
table {
table-layout: fixed;
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
td:after {
content: "\00A0";
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Set the width and height of the td elements rather than a width and height for the table and you will get the desired behaviour.
document.getElementById('8').innerHTML = 'Raaaa';
table{
border: 1px solid black;
border-collapse: collapse;
}
td{
width:120px;
height:120px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
set a max-width
td{
border: 1px solid black;
text-align: center;
max-width: 200px;
}
or
td{
border: 1px solid black;
text-align: center;
max-width: 30%;
}
You will need to specify the td width, and maybe the height as well:
https://jsfiddle.net/m20akmdx/23/
document.getElementById('8').innerHTML = 'my long text gets wrapped';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: calc(100% / 3);
height: calc(100% / 3);
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
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>