I am trying to make the following table:
I have an outer border and one border at the bottom.
I got it all right, my only problem is that I can't get the space between the outer border and table (space of 20 px)
when I use border-spacing it doesn't work.
I would appreciate your help.
here is a sample of the code:
http://jsbin.com/AcanusA/1/edit
css code:
.outlined
{
font:13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 10px solid #d0d0ff;
margin: 20px;
border-spacing:20px;
}
.center{
text-align: center;
}
.side{
text-align: left;
}
.lastLine{
border-bottom: 2px solid black;
}
html code:
<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS2.css">
<body>
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
</body>
</html>
Why doesn't border-spacing work?
border-spacing doesn't work because, from https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing,
The border-spacing CSS property specifies the distance between the
borders of adjacent cells (only for the separated borders
model).
Moreover border-spacing is the space between all cells, not only between border cells and the table, so it isn't what you want.
Solution 1: wrapper
#wrapper {
border: 10px solid #d0d0ff;
width: 70%;
overflow: auto;
}
.outlined {
font: 13px Tahoma;
border-collapse: collapse;
margin: 20px;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<div id="wrapper">
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
</div>
It's the old way of doing it: set a a margin to the table and place it inside a wrapper element with a border.
Modifying the layout for styling purposes can be syntactically incorrect, but works on old browsers.
Solution 2: outline
.outlined {
font: 13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 20px solid transparent;
margin: 20px;
outline: 10px solid #d0d0ff;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
Add a transparent border and an outline to the table:
border: 20px solid transparent;
outline: 10px solid #d0d0ff;
margin: /* >= 10px */;
Note the outline doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.
Browser support
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)
1.0 | 1.5 (1.8) | 8.0 | 7.0 | 1.2 (125)
Note: Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape
Solution 3: box-shadow
.outlined {
font: 13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 20px solid transparent;
margin: 20px;
box-shadow: 0 0 0 10px #d0d0ff;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
You can also use a transparent border with a box-shadow:
border: 20px solid transparent;
box-shadow: 0 0 0 10px #d0d0ff;
margin: /* >= 10px */;
Note the shadow doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.
Browser support
Use vendor prefixes (-webkit-box-shadow and -moz-box-shadow) for more support:
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)
-----------------------------------------------------------------------------------
10.0 | 4.0 (2.0) | 9.0 | 10.5 | 5.1 (Webkit 534)
4.0 -webkit| 3.5 (1.9.1) -moz| | | 5.0 (Webkit 533) -webkit
Notes (thanks #davidbuttar):
In order to get box-shadow in IE9 or later, you need to set border-collapse to separate. Then, you lose the bar in your table.
On Chrome, transparent borders don't stop the the bar in your table, and it reaches the box-shadow. I think it's a bug, and can be fixed using a white borders instead of transparent.
Appendix: How does box-shadow solution work?
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Formal syntax: none | [inset? && [ <offset-x> <offset-y>
<blur-radius>? <spread-radius>? <color>? ] ]#
inset: omitted, don't want it.
<offset-x> <offset-y>: 0 0, because we don't want to move the shadow.
<blur-radius>: 0, because we don't want a blurred shadow.
<spread-radius>: 10px, because we want the shadow to expand to be 10px wide.
<color>: #d0d0ff
How could it be that you made the border transparent and the shadow
colored, and you got the opposite result?
That's because border-spacing defines a shadow outside borders (unless you use inset)
From the spec:
An outer box-shadow casts a shadow as if the border-box of the element
were opaque. The shadow is drawn outside the border edge only.
I would just use a container div and put the border on that with some padding:
http://jsbin.com/AcanusA/8/edit
Html becomes:
<div class="outlined-container-1">
<div class="outlined-container-2">
<table class="outlined">
<tr id="headline">
<th class="si .......
</div>
</div>
Additional CSS:
.outlined-container-1
{
width:70%;
}
.outlined-container-2
{
border: 10px solid #d0d0ff;
padding:20px;
}
.outlined
{
width:100%;
font:13px Tahoma;
border-collapse: collapse;
}
Obviously change the outlined name to something more relevant.
Related
I have a table which loads the data by crating all the elements inside the table dynamically. Something similar to datatable. Now, every time I regenerate the tbody for the next page, the column width changes based on text length and it changes the table width. I tried table-layout: fixed and td {width: 1%} but they don't work. I want to keep the table column width same as the header text width. How can I achieve that?
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
/*table-layout: fixed;*/
/*width: 934px;*/
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>
Need to set th to some fixed width then columns will stop resizing. Since you have 6 columns I chose width: 16.6% for each th which is 100%/6.
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
table-layout: fixed;
width: 934px;
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
th {
width: 16.6%;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>
I would comment but my reputation isn't high enough for that yet.
Anyways,
I would think that your answer lies in the fact that the width in the following code needs to be changed to a static number, not a percent.
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
But also, you are targeting the classes .r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th which are the cells themselves. It would probably be better if you targeted .r-thead.tr and .r-tbody-tr as these are the containers for your cells. I hope this fixes your issue.
try using html 'colspan' property
I created a table inside of a card. The issue I having is that when I minimize the page, some of the html elements begin to leave the card as you can see in the image below. Can someone tell me why this may be happening? Here is a fiddle that has the html and css for this.
<div class="report-card-i text-center text-muted">
<div class="font-16 m-l-35 p-t-25 p-b-10">Top Locations</div>
<div class="m-l-15 m-r-15">
<table class="table">
<thead>
<tr class="black-cell">
<th class="font-light">#</th>
<th class="font-light"><span class="m-l-125">Location</span></th>
<th class="font-light">Shipments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
</tbody>
</table>
</div>
</div>
.report-card-i{
background: #fff;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
I am working on a table and for some reason, when I added rowspan, the border is popping out a little bit on the right side.
Is there a way I can merge the border?
<div class="row">
<table cellpadding="5" cellspacing="3">
<tr class="top_box" style="background-color:#001F5B;">
<td>Loan<br />Amount</td>
<td>Term</td>
<td>Monthly<br />Payment</td>
<td>Rate</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$1,000</td>
<td class="blue_1">24 months</td>
<td class="blue_2"> <br/>$45.68<br/> </td>
<td class="blue_3">8.99% APR</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$5,000</td>
<td class="blue_1">36 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$158.98<br/>$124.40<br/>$103.77</td>
<td rowspan="3" border-collapse="collapse" class="blue_3">Includes 0.75% <br/>promotional <br/>rate discount<br/> and 0.25% <br/>rate discount<br/> for auto debit</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$15,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$476.93<br/>$373.20<br/>$311.30</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$25,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$794.88.93<br/>$622.01<br/>$518.84</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
</table>
table td{
border:1px solid #001F5B;
}
table .big_box td{
padding-top:16px;
padding-bottom:16px;
color:#001F5B;
}
table .top_box td{
padding:10px;
color:#F6F9FD;
}
table span{
font-size:.5em;
position:relative;
top:-9px;
font-weight:bold;
}
.blue_1{background-color:#C7DDF3;}
.blue_2{background-color:#C7DDF3;}
.blue_3
{background-color:#C7DDF3;
font-size: 15px;
border-collapse:collapse;
}
this is the CSS
What is causing scroll bar to not be clipped on side of table in this fiddle: http://jsfiddle.net/m4HB3/8/ At the moment it is underneath the last column, meaning it is taking up some of that columns space and thus causing alignment issues with the table.
The table headers are fixed as I want a scrolling table with fixed headers.
Could the problem be the width set for the table and individual columns?
Can somebody please also text their answer on a script outside jsfiddle and put it straight on a browser because I have seen examples where something is working in jsifddle but then not working in main application on browser.
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
max-height:25px;
}
#tableqanda_onthefly
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
UPDATE:
http://jsfiddle.net/m4HB3/37/
I have a js fiddle which works perfectly. But if you copy code into a standard html, the columns are not aligned. If you can get the columns aligned correctly with their headings with the scroll bar on the side of the table, then that will be perfect answer
Is that something what could work for you?
Using here script/jQuery within your div to scroll, slightly modified css to give side scrolling.
Please see: http://jsfiddle.net/m4HB3/177
Here's standalone version: http://webapper.pl/demo.html
I didn't spend much time on css but i'm sure you could make it look pretty.
var ele = $('.scroll');
var scroll = 25;
$('.up').on('click',function() {
ele.scrollTop( ele.scrollTop() - scroll );
});
$('.down').on('click',function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
Or you can use static table width (that would also fix your problem):
http://jsfiddle.net/m4HB3/178/
Here is a fiddle based on the linked question by Sara:
DEMO
html
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<col width="10%" />
<col width="54%" />
<col width="14%" />
<col width="22%" />
<thead class="fixedHeader">
<tr>
<th class="questionno">Question No.</th>
<th class="question">Question</th>
<th class="option">Option Type</th>
<th class="image">Image</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td class="questionno">1</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">2</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">3</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">4</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">5</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">6</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">7</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">8</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
css
div.tableContainer {
clear: both;
border: 1px solid #963;
overflow: auto;
}
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body td {
box-sizing: border-box;
border: 1px solid grey;
}
table .questionno {
width: 10%;
}
table .question {
width: 54%;
}
table .option {
width: 14%;
}
table .image {
width: 22%;
}
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>