I have a table like this and I am adding the border-bottom. There is space between the columns. I cannot figure where I did wrong. What should I do here?
#T_e5208500_98ac_11e7_a588_1866da2de39f table {
border-collapse: collapse;
table-layout: fixed;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f th,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 67px;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f th {
text-align: left;
border-bottom: 1px solid black;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f td {
text-align: right;
}
You can try including below lines in your CSS code
table{
border-spacing : 0;
}
Sample Example
try this snippet:
#T_e5208500_98ac_11e7_a588_1866da2de39f table,th,td{
border-collapse: collapse;
}
It was missing some HTML but here is a simple solution
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tr>
<td>Hello Header</td>
<td>Hello Header</td>
</tr>
</table>
and the css
table {
border-collapse: collapse;
table-layout: fixed;
}
th,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
padding-right: 5px;
}
thead{
border-bottom: 1px solid black;
}
Related
I have generated a HTML page with several tables.
Right now they show one after another without any space between them
my current css file is very simple
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;
}
How can I add some spacing between the tables using only css?
I tried
table{
margin-right: 10px;
float: left;
}
but it did not work out
I modified it to
margin-bottom:10px;
float:bottom;
and it seems to work.
Your code should work. Check this snippet:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
margin-right:10px;
float:left;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr><td>aaaaa</td></tr>
</table>
<table>
<tr><td>bbbb</td></tr>
</table>
<table>
<tr><td>aabbbbaaa</td></tr>
</table>
If you have width: 100%; you need to add margin-top:10px for example.
i don't understand why border of first tbody tr's td is not visible.
i think there is no reason border is not visible.
what i fugure out is this.
if natural height of th is higher than height i fixed for th, first tbody tr's td is visible.
if there is no code th{height: xxpx; }, first tbody tr's td is visible.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
This is happening because position: relative; on .table.summary-style thead th causes that row of elements to appear 'above' the borders of other elements. This is despite the fact that box-sizing: border-box; has been used, as the borders of the table elements have been collapsed together. The solution is to either remove position: relative; on the first row or remove border-collapse: collapse; from .table.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
Try:
table,
td,
th {
border-collapse: collapse;
padding: 0.5em 1em;
border: 2px solid black;
}
.table.summary-style {
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption {
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th {
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style>tbody>tr>td {
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
I am having trouble making tbody border not extending over the width of thead. Is there a way to fix it? Thanks
PS: There are other problems like the empty ".cell" div not sizing properly, however I'm not sure if you can post multi-issue questions. So let's focus on the issue above.
table {
box-sizing: border-box;
border-collapse: collapse;
margin-bottom: 2000px;
}
th {
background-color: white;
position: sticky;
top: 0;
padding: 0;
border: 0;
}
.cell {
box-sizing: border-box;
display: inline-block;
height: 100%;
width: 100%;
padding: 15px;
background-color: red;
}
th:first-of-type > .cell {
border-radius: 5px 0 0 0;
}
th:last-of-type > .cell {
border-radius: 0 5px 0 0;
}
td {
border: 1px solid blue;
background-color: #fff;
padding: 15px;
}
tbody {
border: 2px solid green;
box-sizing: border-box;
}
<table>
<thead>
<tr>
<th><div class="cell"></div></th>
<th><div class="cell">aaaaaa</div></th>
<th><div class="cell">aaaa</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
</tbody>
</table>
I'm assuming the rounded corners are the reason why you are placing <div> within the <th>. If you want rounded corners then you need to use the following styles:
table { border-collapse:separate; border-spacing:0; border: 0; }
The demo has some additional changes that can be adjusted.
Demo
table {
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2000px;
border: 0;
}
thead {
position: sticky;
top: 0;
}
th {
border: 1px solid red;
background-color: red;
padding:15px;
}
th:first-of-type {
border-top-left-radius: 6px;
}
th:last-of-type {
border-top-right-radius: 6px;
}
td {
border: 1px solid blue;
background-color: #fff;
padding: 15px;
}
<table>
<thead>
<tr>
<th></th>
<th>aaaaaa</th>
<th>aaaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaaaaa</td>
<td>aaaa</td>
</tr>
</tbody>
</table>
So I'm building a web shop cart (using Bootstrap 4.1) and I have to make a list of items in the cart with quantity, the price and total-price... I've decided to use a table for this and ran into an following problem:
I'm trying to make a table that has to look like this:
and my best attempt gave me a table that looks like this..:
My question to you fellow internet strangers is how do I make the table borders surounding the "quantity" to look like in the first picture???
and how do I merge the last cells to get the total price (23,97 €) alighned in the middle of the table like in the first picture??
P.S. Is using a table even a corect choice or should I have used a different element like an or ?
Thanks in advance fellow spacemans :)
My Code:
HTML:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>100 % Mango</td>
<td>1 X</td>
<td>12.99 €</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Vanilla</td>
<td>2 x</td>
<td>10.98 €</td>
</tr>
</tbody>
</table>
</div>
SCSS:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
th, td {
border: none;
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
}
}
}
You can achieve that using :after as described below, and using normal border-right for the forth row.
with :after
td{
position:relative; //positioning the td so that the :after would use it for absolute positioning
//for the small borders on 2nd and 3rd columns
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%); //moving the element back up by half its height to center it vertically
}
//for the big border on the 4th column
&:nth-child(4){
border-right:2px solid #000; //do that for the th aswell
}
}
Full Code:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
&:nth-child(4){
border-right:2px solid #000;
}
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
td{
position:relative;
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
}
&:nth-child(4){
border-right:2px solid #000;
}
}
th, td {
border: none;
}
}
}
Here us working one:https://jsfiddle.net/b2f03y1p/17/
Instead this code:
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
Use this code:
td:nth-child(2):after,td:nth-child(3):after{
content: '';
height: 21px;
width: 2px;
background-color: black;
position: absolute;
top: 35%;
left: 90%;
}
td:nth-child(4):after{
content: '';
height: 100%;
width: 2px;
background-color: black;
position: absolute;
left: 90%;
}
In main.html, I have this
<style type="text/css">
#hor-my-bundles
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-my-bundles th
{
font-size: 14px;
font-weight: bold;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-my-bundles td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 6px 8px;
}
#hor-my-bundles tbody tr:hover td
{
color: #009;
}
</style>
<table id="hor-my-bundles">
<thead>
<tr>
<th scope="col"> Name </th>
...and a few more.....
</tr>
</thead>
<tbody>
<tr>
...body stuff
</tr>
</tbody>
</table>
I have a global css enabled, which has the following:
table{}
th{ background-color: #BBB; padding-left: 10px; padding-right: 10px;}
td, th{ }
td{}
tr:hover{ background-color: #dfd; }
But I thought since I've specified my table with a different cs id, <td> and etc should follow those as well. Instead, my <th> in this case is following the global style.
Why? Thanks.
You have not specified a background-color for your #hor-my-bundles th, #hor-my-bundles tbody tr:hover td styles. That's all I can see that would affect the style.
It correctly takes the styles in this example http://jsfiddle.net/sN8ed/2/