I have a little spesific question. I'm adding border-spacing: seperate to my table. But i want to add border-spacing to only thead tag. Is it possible?
What you can do (if you want border around your thead cells) is to wrap then in a span and manipulate it using css:
table {
border: solid 1px black;
}
table thead th {
padding: 20px;
}
table thead th span {
border: solid 1px black;
}
<table>
<thead>
<tr>
<th>
<span>Month</span>
</th>
<th>
<span>Savings</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Related
My HTML:
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</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>
</table>
My CSS:
table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;
}
th, td {
padding:15px;
}
th {
text-align:left;
border-collapse:collapse;
}
I want to collapse the borders of the TH only, but it's not working. Border collapse and border spacing aren't working when i target only the TH. I can change the background color and the padding and do other changes to TH only, but border changes seems to not work. Why is that?
Note: Before you tell me how it can be done using other ways, please tell me why THIS way isn't working.
Because border-collapse is a style rule of the table and not of the single cells (td or th). This means that you set it on the table element and all the borders in the table will collapse or separate.
You can mimic the behavior of border-collapse: separate only in td by doing something "hacky" like inserting a div inside tds. Check out the fiddle below:
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
padding: 2px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
td > div {
height: 100%;
width: 100%;
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Cell 1</div></td>
<td><div>cell 2</div></td>
</tr>
<tr>
<td><div>Cell 3</div></td>
<td><div>Cell 4</div></td>
</tr>
</tbody>
</table>
as everybody told you , border-collapse is a rule set for the whole table, it tells how cells should be printed at screen side by sides.
A work around could be to fake borders with a box-shadow.
inside tds :
table {
border-collapse: collapse;
}
th {
border: solid 2px;
box-shadow: inset 0 -2px;
}
td {
border: solid transparent;
box-shadow: inset 0 0 0 2px;
padding:3px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
outside th
thead {
padding-bottom: 2px;
}
th {
border: 0;
box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
padding: 2px;
}
td {
border: solid 2px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
The border-collapse property can only be applied to <table> elements - not individual rows or cells
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
I am having issue trying to make table 1 look like table 2 using css. I also noticed the increased height and watermark image does not reflect on print preview
Table 1
Table 2
Adding a row at the end of the tbody solve this.
<table>
<thead>
<tr>
<th>S/N</th>
<th>Description of goods</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arch</td>
<td>7.92</td>
</tr>
<tr>
<td>2</td>
<td>White</td>
<td>3.96</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000;
}
td {
border-top: 0;
border-bottom: 0;
}
table {
height: 150px;
}
tr:last-child {
height: 100%;
}
Check my example https://jsfiddle.net/moisesnandres/4py2m8aq/
i have an issue with css/html table:
When I use thead and tbody tags with a colspan attribute, the bottom border of the header is divided.
The gap size is dependent of the th border width.
Did you have a solution to get a continuous border on header bottom (without removing thead and tbody) ?
JSFiddle example
table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}
table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}
with THEAD and TBODY but without COLSPAN
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</table>
The corner rendering between collapsed borders does not seem well-specified, so it's not clear that this is actually a bug rather than just a variance in behaviour.
I did find a horrible workaround for Firefox, by creating a pseudo second row in the thead, and then hiding it, and also hiding the top border of the first tbody row like this:
thead:after {
content:'';
display:table-row; /* see note below */
position:absolute;
visibility:hidden;
}
tbody tr:first-child td {
border-top-width:0;
}
(Note that the display:table-row is just for show. In reality, the position:absolute causes the pseudo-element to be display:block regardless of whether the display property is set to table-row or left at its default inline. The table layout of the container will then cause that block to be wrapped in anonymous table objects of table-row and table-cell to form a well structured table.)
table {
border-collapse: collapse;
}
th {
border: 4px solid red;
border-bottom: 4px solid black
}
td {
border: 4px solid blue;
}
thead tr {
border-bottom: 5px solid green
}
table ~ table thead:after {
content:'';
position:absolute;
visibility:hidden;
}
table ~ table tbody tr:first-child td {
border-top-width:0;
}
with THEAD and TBODY but without COLSPAN
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
<thead>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
<tr>
<th>
Column 1
</th>
<th>
Column 2
</th>
</tr>
<tr>
<td colspan="2">
Content 1 and 2 (merged cells)
</td>
</tr>
</table>
You can have an illusive fix to this by changing the borders from 4px/5px to 1px. As to why you are getting that must have to deal with the properties of thead and tbody, being that the problem only occurs with their presence.
Refer to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.
Is there any way i can set padding to the thead alone of a table?
table th
{
padding:15px;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Jhon</td>
<td>Smith</td>
<td>$200</td>
</tr>
</table>
<style>
table, td, th { border : 1px solid black; }
th { padding : 13px; }
td { padding : 15px; }
</style>