How to separate tbody with box-shadow from another tbody?
Like a
tbody {
margin-bottom: 16px
}
But, I don't want to use display: block on tbody.
JSFIDDLE:
http://jsfiddle.net/kw9odqjr/1/
IMG what I want:
Instead of repeating tbody many time you can used below structure:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
border: none;
}
tbody table {
box-shadow: 0 0 0 1px black;
border-radius: 8px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="2" height="20"></td></tr>
</tbody>
</table>
It's not allowed to assign margin for tbody,
you can insert a separator like this
<tbody style="box-shadow:none; height:20px;">
<tr></tr>
</tbody>
Related
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>
For the following table structure table border is showing in some browsers, and in some browsers it is not showing.
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}
<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>
See the below screenshot of table in browsers:
Firefox table
Chrome table
The Firefox table structure is the correct structure, but in Chrome it is not showing properly. What is wrong in this code? How to make the table structure same in every browser?
Set rowspan=4 for that Cell like below
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>
Here is the solution might be it help.
You have to add rowspan=4
Here is the example
How can I put border only around of my external table? I don't need in every <tr> but just around. I tried to use css but in a Joomla article it is not easy. Thanks for help.
<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;">
<tbody>
<tr>
<td>aasda</td>
<td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
<td width="60%">asfasfasfasf</td>
<td>blabla</td>
</tr>
<tr>
<td>saf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width='"70%'>asf</td>
<td rowspan="9" width="30%">
<p>blabla</p>
<p>blalbalbalalb</p>
</td>
</tr>
<tr>
<td>asf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td>asf</td>
</tr>
<tr>
<td>asf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width='"70%'>asf</td>
</tr>
</tbody>
</table>
You need to add the property border:1px solid red to your table
<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">
<tbody>
<tr>
<td>aasda</td>
<td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
<td width="60%">asfasfasfasf</td>
<td>blabla</td>
</tr>
<tr>
<td>saf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width='"70%'>asf</td>
<td rowspan="9" width="30%">
<p>blabla</p>
<p>blalbalbalalb</p>
</td>
</tr>
<tr>
<td>asf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td>asf</td>
</tr>
<tr>
<td>asf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width='"70%'>asf</td>
</tr>
</tbody>
</table>
<p></p>
Table with border outside
table {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Table with border outside and in rows
table, tr {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Could go on and create for all cases but you get the point.
In CSS we specify what we want to have border.
We can do apply it to zero or more of the following elements, depending on what we want the end result to look like
<table> (table)
<tr> (table row)
<td> (table data)
<th> (table heading)
Not sure if I understood correctly, but solution to my problem is
table {
border: 1px solid;
}
instead of any of
table th, table td {
border: 1px solid;
}
that way you will only get an outside border for the table, instead of every row or cell, source: https://www.w3schools.com/css/css_table.asp
I am able to change the border styling of the top bar in the table, but I can't it to change the background color no matter what I do. Can anyone tell me where I am going wrong? My code is below:
<table>
<thead>
<tr >
<th>strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
CSS:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
Your html code has some syntax erros:
Corrected here and working well:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
</table>
</html>
http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview
It's working for me! Take care with the tags... <strong>
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</table>
Your CSS should include one more rule, for the <th> tag:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr, table thead th {
background-color: pink;
border: 4px solid pink;
}
Also, you have error in the HTML code - missing starting bracket in <strong> tag on line <th>strong>Colour</strong></th>.
Check out the working fiddle.
Try like this: Demo
Instead of giving border for tr you can give for td and th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
And try to open and close tags properly to get expected output :)
No need to add so many styles. Apply this.
table th, table thead tr td {
border: 1px solid red;
}
table thead tr {
background-color: red;
border: 4px solid pink;
}
<table>
<thead>
<tr >
<th><strong>Colour</strong></th>
<th><strong>Red</strong></th>
<th><strong>Green</strong></th>
<th><strong>White</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Length (m)</td>
<td>1</td>
<td>0.5</td>
<td>0.5</td>
</tr>
<tr>
<td align="left">Weight (kg)</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td align="left">Burn Time (sec)</td>
<td>60</td>
<td>22</td>
<td>15</td>
</tr>
<tr>
<td align="left">Light Output (cd)</td>
<td>200 000</td>
<td>100 000</td>
<td>850 000</td>
</tr>
<tr>
<td align="left">Visibility at sea level (km)</td>
<td>20</td>
<td>15</td>
<td>26</td>
</tr>
</tbody>
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow